利用vue-cli配合vue-router搭建一个完整的spa流程（二）

mcterry 发布于2019-08-20 16:05 / 2378人阅读

摘要：利用配合搭建一个完整的流程一在一中写到了主要页面的编写，现在开始三个路由页面的编写。每个列表绑定跳转到详情页的函数。整体思想通过监控的变化，变化后执行函数，随后重新获取数据。

上篇文章太长了，编写时拖动太麻烦，重开一篇。
利用vue-cli配合vue-router搭建一个完整的spa流程（一）

在（一）中写到了主要页面的编写，现在开始三个路由页面的编写。

第一步：路由实例index.js

先贴出代码。

import Vue from "vue"
import Router from "vue-router"
import VueResource from "vue-resource"
import tem from "@/components/showone"
import tem_cont from "@/components/showtwo"
import tem_error from "@/components/error"

//安装插件
Vue.use(Router)
Vue.use(VueResource)

export default new Router({
    routes:[
        {
            path:"/user/:list/:listNum",
            component:tem,
            children:[
                {
                    path:"con",
                    component:tem_cont
                }
            ]
        },
        {
            path:"/user/error",
            component:tem_error
        }
    ]
})

代码很短，一一解释下。

import Vue from "vue"
import Router from "vue-router"
import VueResource from "vue-resource"
import tem from "@/components/showone"
import tem_cont from "@/components/showtwo"
import tem_error from "@/components/error"

↑ 这里是引入所有使用的数据，参数。

//安装插件
Vue.use(Router)
Vue.use(VueResource)

↑ 这里说下 vue-resource 这个一开始没有安装，打开项目右键打开Git 键入 npm install vue-resource --save
这是一个ajax插件，使用起来比较方便而且很简单。

routes:[
    {
        path:"/user/:list/:listNum",
        component:tem,
        children:[
            {
                path:"con",
                component:tem_cont
            }
        ]
    },
    {
        path:"/user/error",
        component:tem_error
    }
]

↑ 路由配置，详情页面是主页面的子路由。

第二部：三个路由xxxx.vue文件编写 Ⅰ： showone.vue

先贴出代码，有些复杂，慢慢解释。

template有俩部分组成：


    
        
            
                
                    首页
                    页面一
                
            
        
    
    
        
            
                
            
            
                
                {{item.content | more}}

↑ 这是第一部分，包含导航与当前分类中全部内容的一个列表。

①： v-show="routerData.mainShow" 这个控制整体部分显示隐藏，与上一页，下一页按钮为相同的控制数据，因为二者显示，隐藏逻辑是一样的。都是在详情页隐藏，主页显示。

②： v-on:click="link(0)" 导航按钮跳转绑定的函数。

③： v-for="(item,index) in routerData.showData" 循环数据，渲染列表。

④： v-on:click="go(item,index)" 每个列表绑定跳转到详情页的函数。

⑤： {{item.content | more}} 渲染简介，并且通过一个过滤器使内容中数字过多时，进行剪切

↑ 这是第二部分，子路由入口。v-bind:router-nesting="routerData" 给子路有中渲染页面的数据。

接下来是script部分

首先引入router实例 import router from ".././router"
再接收 zjapp.vue 传输过来的数据 props:["routerData"]

methods方法里函数解释：

go(obj,index){
    router.push({path:this.$route.path+"/con",query:{type:index}});
}

↑ 这是列表中内容点击时执行的函数，从 template 中传过来 index 值，添加到 url 中，从而获取这是列表中第几个。

link(num){
    var listNum=this.$route.path.slice(6,7);
    if(listNum!=num){
        router.push("/user/"+num+"/0");
        this.isActive=this.$route.path.slice(6,7);
    }
}

↑ link（num）函数是导航点击绑定的函数，通过传志 num 将 url 转换为对应的分类，从而触发 watch 重新获取数据。这里加了一个判断，重复点击，无效。

filters:{
    more(value){
        var newMessage=value.slice(0,40)+"........点击查看更多";
        return newMessage;
    }
}

↑ 过滤器，剪切字数。

style就不解释了

Ⅱ： showtwo.vue

这个是文件是详情页面，即主页面中的列表内容点击后，跳转的页面。

↑ 数据与showone.vue相似，routerNesting数据是通过ziapp.vue->showone.vue->showtwo.vue传递过来的。
back() 函数将url从/user/0/0/con?type=2跳转到/user/0/0 触发watch更新数据。

Ⅲ： error.vue

↑ 嗯~ o(￣▽￣)o，这个比较简单，不做解释了。

结语

至此，全部都解清楚了，按照步骤来的话一个简单的spa也初见其形。

整体思想：通过watch监控url的变化，变化后执行routerPath（）函数，随后重新获取数据。

新手，有错误，和需要指正的地方欢迎留言！

后续会有其他实例项目详解，至于时间嘛，这要看什么时候找到工作了(ˉ▽ˉ；)...

云服务器 GPU云服务器一个完整的python程序最小二乘法拟合算法流程图怎样搭建一个.com的网站怎么搭建一个自己的视频网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82703.html

利用vue-cli配合vue-router搭建一个完整的spa流程（一）

摘要：利用配合搭建一个完整的流程二前言所用的一些基本操作。全局安装创建一个基于的模板创建过程中，为必须，其他语法检测，单元测试等按需求安装。为入口文件，的实例在这里书写。挂载在中的标签上。定时器的作用是模拟数据请求延时。 2017/5/9 更新！GitHubpages搞了下，PC可以浏览。↓ https://15901233752.github.io... showImg(https://...

cgh1999520 2019-08-20 16:01 评论0 收藏0
webpack配合vue.js实现完整的单页面demo

摘要：本篇文章主要是我在开发前研究了的单页面应用，因为需要用到的，所以确保安装了，建议官网安装最新的稳定版本。本文章只是和大家探讨怎么利用配合做一个单页面应用，具体关于里面的内容怎么写并不在本篇文章的介绍范围。本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用，因为需要用到node的npm，所以确保安装了node，建议官网安装最新的稳定版本。并且在项目中需要加载一些np...

2450184176 2019-08-19 18:35 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0