• 官方文档：router.vuejs.org/

一、配置

方式一

• main.js中：

  import Vue from 'vue'
  import Router from 'vue-router'
  import Hello from './components/Hello.vue'Vue.use(Router);const router=new Router({routes:[{path:'/hello',component:Hello}]
  });new Vue({router,render:h=>h(App),
  }).$mount('#app');
  复制代码

• App.vue中：

  <div id='app'><router-link to='/hello'></router-link><router-view></router-view>
  </div>
  复制代码

方式二

• router.js中：

  import Vue from 'vue'
  import Router from 'vue-router'
  import Hello from './components/Hello.vue'Vue.use(Router);export default new Router({routes:[{path:'/hello',component:Hello}]
  })
  复制代码

• main.js中：

  import router from './router.js'new Vue({router,render: h => h(App),
  }).$mount('#app')
  复制代码

• App.vue中：

  <div id='app'><router-link to='/hello'></router-link><router-view></router-view>
  </div>
  复制代码

二、动态路由匹配

• 对于多个路径匹配同一个组件的情况（例如User组件显示的是不同用户的信息：/user/foo和/user/bar）：

  new Router({routes:[{path:/user/:username',component:User}]
  });
  复制代码

• 在User组件中可以通过this.$route.params.username获取到当前路径对应得的username。

• 从/user/foo切换到/user/bar，User组件不会重新渲染，因此需要通过watch来监听：

  //User.vue
  watch:{'$route'(to,from){console.log(to.params.username);}
  }
  复制代码

  或者使用beforeRouteUpdate：

  //User.vue
  beforeRouteUpdate(to,from,next){console.log(to.params.username)
  }
  复制代码

• 若同一个路径匹配了多个组件，则先定义的路由优先级更高：

  //`/user`路径会指向User.vue
  export default new VueRouter({routes:[{path:'/user',component:User},{path:'/user',component:Admin}]
  });
  复制代码

三、嵌套路由

实现方式如下：

<!--App.vue-->
<router-view></router-view>
<!--User.vue-->
<router-view></router-view>
复制代码

export default new VueRouter({routes:[{//默认路径path:'/',component:Hello,children:[{path:'',component:Left}]},{path:'/hello',component:Hello,children:[{path:'',component:Left},{path:'left',component:Left},{path:'right',component:Right},]},{path:'/world',component:World}]
});
复制代码

四、用函数定向

this.$router.push()

• 参数可以是路径字符串（router.push('home')）、定位对象（router.push({path:'home'})，router.push({name:'user',params:{userId:123}})）。
• 若参数中有path字段，那么params就会被忽略。params只能和name配合使用。
• 备选参数：onCompelete和onAbort回调函数。
• 会在历史纪录中添加新纪录。

this.$router.replace

• 与push()类似。
• 区别在于，replace()不会在历史纪录中添加新纪录，而是替换到当前路由。

this.$router.go(n)

• 参数n是一个整数，代表前进或后退几步。

五、命名视图

• 可以设置多个<router-view>并用name属性来区分它们：

  <!--App.vue-->
  <router-view class="a"></router-view>
  <router-view class="b" name="b"></router-view>
  <router-view class="c" name="c"></router-view>
  复制代码

  //router.js
  export default new Router({routes:[{path:'/',components:{default:'Foo',a:Bar,b:Baz}}]
  });
  复制代码

• 可以和嵌套路由组合使用。

六、重定向和别名

重定向

//router.js
export default new Router({routes:[{path:'/a',redirect:'/b'},//↓配合命名路由使用↓{path:'/c',redirect:{name:'d'}}，//↓动态重定向↓{path:'/e',redirect:to=>{//接受目标路由作为参数//返回重定向的路径}}]
});
复制代码

别名

//router.js
routes:[{path:'/a',component:A,alias:'/b'}
]
复制代码

当你访问/b，实际匹配到A组件，但url中还是/b。

Props

• 通过个组件设置props:[]，可以实现传递数据。

  <!--Compo.vue-->
  <template><p>{{propName}}</p>
  </template>
  <script>export default{name:'Compo',props:['propName']}
  </script>
  复制代码

  //router.js
  export default new Router({routes:[{path:'/compo/:propName',component:Compo,props:true},//↓命名视图情况下，要对每个视图设置props的值↓{path:'/compo/:propName',components:{default:Compo,sideBar:Sid},props:{default:true,sideBar:false}}]
  })
  复制代码

• 当props的值为true，this.$router.params就是要传入组件的数据。

• 当props是一个对象，那它就会作为组件的props传入。

• 也可以用一个函数，把相关数据return给props。

History模式

• vue-router默认是Hash模式：使用URL的hash模拟完整的链接。

• 也可以使用history模式，这样URL中就不带/#了。

  //router.js
  export default new Router({mode:'history',routes:[...]
  });
  复制代码

-history模式需要后端的设置来配合（若URL匹配不到任何静态资源，就返回index.html，即依赖页面），否则用户直接在浏览器地址栏输入相应的URL就会报404。但这样，需要404页面时也不会出现了，所以：

export default new Router({mode: 'history',routes: [{ path: '*', component: NotFoundComponent }]
})
复制代码