vue中的动态路由

介绍

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

使用

html代码：
<div id="app">
        <router-link to="/user/1">user1</router-link>
        <router-link to="/user/2">user2</router-link>
        <router-view></router-view>
</div>

js代码：
 // 1.定义组件
 let user = {
 // 接受参数
 template:`
     <div>{{$route.params.id}}</div>
 `
 }
 // 2.创建路由实例对象
 let router = new VueRouter({
     routes:[{
         // 动态路径参数使用:开头
         path:'/user/:id',
         component:user
     }]
 })
 new Vue({
     el:"#app",
     // 将路由实例对象导入vue实例
     router   //相当于router:router,在此使用简写形式
 })

注意

当使用动态路径参数的时候，从/user/1到user/2的时候，组件user实例就会被复用，比起销毁再重建，复用更加高效。但是组件也会因此不再重新创建，这就导致一个问题，声明周期钩子函数就不会被调用了，此时需要用watch来监测$route对象的变化

let user = {
     // 接受参数
     template:`
         <div>{{$route.params.id}}</div>
     `,
     watch: {
         $route(to,from) {
             console.log('to',to)
             console.log('from',from)
         }
     }
 }