8.Vue组件之路由VueRouter(2018.01.16)

1.VueRouter简介：

当我们的项目中要使用导航栏或者页面切换跳转时，我们就需要用到路由VueRouter。

2.使用案例：

1).安装：

cnpm install --save vue-router

2).新建组件 Home.vue，Foo.vue，Bar.vue，NotFoundComponent.vue：

①. Home.vue：

<template>     <div>         <div class="men_left">              <router-link to=" /foo "> Go to Foo </router-link>             <br/>              <router-link to=" /bar/1234 "> Go to Bar </router-link>             <br/>              <router-link :to=" { name: 'bar', params: { id: 123 }} "> Go to Bar2 </router-link>             <br/>              <router-link to=" /home "> Go to home </router-link>         </div>         <div class="men_right">             {{ msg }}              <router-view></router-view>         </div>     </div> </template> <script>     export default {         name:"home",         data(){             return {                 msg:"我是Home组件"             }         }     } </script> <style scoped> .men_left{     width:30%;     float:left; } .men_right{     width:70%;     float:left; } </style>

②. Foo.vue :                   

<template>     <div>         {{ msg }}     </div> </template> <script>     export default {         name:"foo",         data(){             return {                 msg: "我是foo组件"             }         }     } </script> <style scoped> </style>

③. Bar.vue：

<template>     <div>         {{ msg }}         参数为：{{ $route.params.id }}     </div> </template> <script>     export default {         name:"bar",         data(){             return {                 msg: "我是bar组件"             }         }     } </script> <style scoped> </style>

④. NotFoundComponent.vue：

<template>     <div>         {{ msg }}     </div> </template> <script>     export default {         name:"bar",         data(){             return {                 msg: "您访问的页面不存在"             }         }     } </script> <style scoped> </style>

3).在 src 目录下新建 router 目录，然后再在 router 目录里面新建 index.js ，内容如下：

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //加入需要渲染的组件 import  Home  from  '../components/Home' import  Foo  from  '../components/Foo' import  Bar  from  '../components/Bar' import  NotFoundComponent  from  '../components/NotFoundComponent' //路由 const routes=[     {         path: ' / ',         name: 'home',         component:  Home ,         children:[             {                 path: ' foo ',                 name: 'foo',                 component:  Foo             },             {                 path: ' bar/:id ',                 name: 'bar',                 component:  Bar             },             {                 path: ' home ',                 name:' home ',                 redirect: ' / '     //如果访问 '/home' 将跳转到 '/' 下             }         ]     },    {          path: '*',   //如果访问的路径都没有匹配到将返回该组件         component:  NotFoundComponent     } ] export default new VueRouter({     routes: routes, });

注：尽量给路由都设置name属性，这样在使用路由的时候可以传递对象，参看上例的Home.vue。

4).在 main.js 文件里面引入：

import router from './router'

注：如果没写具体文件，引入的就是该目录下 index.js 或者 index.vue 文件。

5). 在 main.js 实例化 vue 时注入 router：

new Vue({   el: '#app',   router,  //所有子组件都将具有router的实例，子组件不再需要单独引入   components: { App },   template: '<App/>' })

6).在 App.vue 中使用顶级路由(最顶层的出口，渲染最高级路由匹配到的组件)：

<template>       <router-view></router-view> </template> <script> export default {   name: 'App',   components: {   } } </script> <style> </style>

结果：

3.VueRouter详解：

1). 一个被渲染的组件同样可以包含自己嵌套的 <router-view>：

<router-view></router-view>

2).跳转（导航）最终会解析成<a>标签：

<router-link to=" /foo "> Go to Foo </router-link> <router-link to=" /bar/1234 "> Go to Bar </router-link>

3).路由嵌套

①. 增加 children 属性，里面的配置跟上级配置完全一样。

②. 也要给定显示的位置。

4). 动态路由匹配(具体参考上面的例子)：

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 Bar 组件，对于所有 id 各不相同的链接，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用"动态路径参数"来达到这个效果：

const router = new VueRouter({   routes: [     // 动态路径参数 以冒号开头     { path: ' /bar/:id ', component:  Bar }   ] })

现在呢，像 /bar/123 和 /bar/456 都将映射到相同的路由。

当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 Bar 的模板，输出当前的 id：

<div>         参数为：{{ $route.params.id }}  </div>

具体请参考上面例子。

5).常用方法：

this.$router.go(1);   // 在浏览器记录中前进一步，等同于 history.forward() this.$router.go(-1);   // 后退一步记录，等同于 history.back()

6).在组件中使用 this.$route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。可以使用 props 将组件和路由解耦。具体用法请参考官网。

7).命名视图：

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<router-view></router-view> <router-view name=" a "></router-view> <router-view name=" b "></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置：

const router = new VueRouter({   routes: [     {       path: '/',       components: {          default: Foo,         a: Bar,         b: Baz       }     }   ] })

4.命名视图案例：

1). 新建组件 MenNav.vue，Home.vue，UserEmails.vue，UserProfile.vue，UserProfilePreview.vue，NotFoundComponent.vue：

①. MenNav.vue：

<template>     <div>         <router-link to="/emails">emails</router-link>         <br>         <router-link to="/profile">profile</router-link>   </div> </template> <script>     export default {         name:"menNav",         data(){             return {             }         }     } </script> <style scoped> </style>

②. Home.vue：

<template>     <div>         <div class="men_left">               <MenNav/>         </div>         <div class="men_right">               <router-view/>              <router-view name=" helper " />         </div>     </div> </template> <script>    import MenNav from './MenNav'     export default {         name:"home",         data(){             return {             }         },         components: {               MenNav         }     } </script> <style scoped> .men_left{     width:30%;     float:left; } .men_right{     width:70%;     float:left; } </style>

③. UserEmails.vue，UserProfile.vue，UserProfilePreview.vue类似，改改内容即可：

<template>     <div>         {{ msg }}     </div> </template> <script>     export default {         name:"email",         data(){             return {                 msg: "我是UserEmail组件"             }         }     } </script> <style scoped> </style>

④. NotFoundComponent.vue：

<template>     <div>         {{ msg }}     </div> </template> <script>     export default {         name:"notfound",         data(){             return {                 msg: "您访问的页面不存在"             }         }     } </script> <style scoped> </style>

2). 在 store/index.js 中：

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //加入需要渲染的组件 import  Home  from  '../components/home' import  UserEmails  from  '../components/UserEmails' import  UserProfile  from  '../components/UserProfile' import  UserProfilePreview  from  '../components/UserProfilePreview' import  NotFoundComponent  from  '../components/NotFoundComponent' //路由 const routes=[     {        path: ' / ',       name:' home ',       component:  Home ,       children: [           {             path: ' emails ',             name:'emails',             component:  UserEmails           },            {             path: ' profile ',             name:'profile',             components: {                  default :  UserProfile ,                  helper :  UserProfilePreview             }           }       ]     },     {          path: '*',          name:'404',         component:  NotFoundComponent     } ]  const router = new VueRouter({     routes: routes, }); router.push('/emails')   //进入即跳转到该路由 export default router;

3). 在 App.vue 里面：

<template>       <router-view></router-view> </template> <script> export default {   name: 'App',   components: {   } } </script> <style> </style>