vue进阶：vue-router（vue路由）的安装与基本使用

vue路由安装与基本使用
vue嵌套路由
vue动态路由（路由组件传参）
vue路由重定向和一些其他的路由相关
官方手册：https://router.vuejs.org/zh/

一、vue路由安装与基本使用

在项目根文件夹下执行以下命令安装vue-ruoter:

vue add router

执行命令后会有以下提示：

vue进阶：vue-router（vue路由）的安装与基本使用

这个提示是让我们配置router的实现模式(hash或者history)，这个模式在后面的路由配置中可以设置，只是这里选择的是默认的模式，如果后面的路由配置中不设置就是用这里选择的模式，y表示选择history模式，n选择hash模式，使用hash模式在后面的url中会多出#/。

安装完成以后可在项目根目录下看到新增了router.js文件和views文件夹。

到这里有必要提一下路由是干嘛的（有计算机网络基础的甚至大神者此地绕路），路由一词是用来描述网络数据传输端到端的网络路径范围进程，简单的说就是将数据从一个端口送到另一个端口的路径。而在vue项目中vue-router（路由）就是帮助vue应用找到资源并加载到页面的路径，并且不会触发页面整体刷新重载，而是实现局部刷新。

这里有两个重要的点，在编写代码时遇到url和src不需要添加完整的资源路径，而是通过vue-router来配置路径；其二是不刷新页面，其核心实现是通过hash值或者HTML5的History interface特性来实现。

关于vue-router的实现原理可以参考这篇博客：https://segmentfault.com/a/1190000014822765

关于HTML5的History可以参考这篇博客：https://www.cnblogs.com/roucheng/p/html5api.html

使用和配置路由：

起步示例：

 1 //组件模板结构
 2 <a href="/">home</a>
 3 <a href="/about">about</a>
 4 <router-view></router-view>
 5 
 6 //入口js文件
 7 import Router from 'vue-router' //导入路由插件
 8 import Home from './views/Home' //导入子组件
 9 import About from './views/About' //导入子组件
10 
11 Vue.use(Router)
12 
13 const myRouter = new Router({ //创建路由实例
14   routes:[
15     {
16       path: '/',
17       component:Home
18     },
19     {
20       path: '/about',
21       component:About
22     }
23   ],
24   mode: 'history' //配置路由模式，配置history后url上不会多出#/
25 })
26 
27 new Vue({
28   router: myRouter, //在vue示例中引入路由实例
29   render: h => h(App)
30 }).$mount('#app')

<a>标签的href属性的路径指向路由实例的path属性；

路由实例中的component属性指示路由path指向的组件；

结构文本中的<router-view>标签标识通过路由配置的连接获取的组件的加载位置（a标签href获取的路由实例配置的path指向的组件在这个标签的位置上显示）；

vue实例中router指示配置的路由实例；

注：在上面的示例中虽然实现了vue路由的应用，但是使用的是<a>标签来实现的跳转，这样的实现会导致再加载组件的时候会刷新整个页面，所以再组件模板中需要使用vue提供的自定义标签<router-link>来代替<a>标签实现导航，才能真正的实现vue路由局部更新的效果，所以示例中的模板结构需要修改成：

1 <router-link to="/">home</router-link>
2 <router-link to="/about">about</router-link>
3 <router-view></router-view>

使用数据绑定配置router-link的to属性值：

1.使用data数据绑定：

 1 <router-link :to="homeLink">home</router-link>
 2 
 3 //在组件内些绑定数据
 4 <script>
 5 export default {
 6   data(){
 7     return {
 8       homeLink: '/'
 9     }
10   }
11 }
12 </script>

2.通过vue实例的router实例的名称绑定：

 1 //:to属性JSON数据会根据模板所在组件绑定的vue实例中的router中的name进行匹配
 2 <router-link :to="{name:'about'}">about</router-link>
 3 //在router实例中给每个路由申明name属性
 4 const myRouter = new Router({
 5   routes:[
 6     {
 7       path: '/',
 8       name:'home',
 9       component:Home
10     },
11     {
12       path: '/about',
13       name: 'about',
14       component:About
15     }
16   ],
17   mode:'history'
18 })

配置router模块

将router实例从入口js文件中分离出来作为独立模块，然后在入口js文件中引入模块，再在vue实例上绑定这个引入的路由模块：

 1 --主入口组件中的模板与数据
 2 <template>
 3   <div >
 4     <router-link :to="homeLink">home</router-link>
 5     <router-link :to="{name:'about'}">about</router-link>
 6     <router-view></router-view>
 7   </div>
 8 </template>
 9 
10 <script>
11 export default {
12   data(){
13     return {
14       homeLink: '/'
15     }
16   }
17 }
18 </script>
19 
20 --主入口js文件
21 import router from './router' //主入口js文件中引入路由模块
22 new Vue({
23   router:router, //绑定引入的路由模块这里单独写一个‘router’同等与‘router:router’
24   render: h => h(App)
25 }).$mount('#app')
26 
27 --router模块
28 import Vue from 'vue'
29 import Router from 'vue-router'
30 import Home from './views/Home.vue'
31 import About from './views/About'
32 
33 Vue.use(Router)
34 
35 export default new Router({
36   routes:[
37     {
38       path: '/',
39       name:'home',
40       component:Home
41     },
42     {
43       path: '/about',
44       name: 'about',
45       component:About
46     }
47   ],
48   mode:'history'
49 })

vue-router(路由)使用的完整示例代码