动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全部映射到同个组件，那么我们可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果

动态路径参数，以冒号开头

看个小示例

const router= new Router({
  routes:[
   {
      path:'/user/:tip?/:userId?',
      name:'User',
      component:user
    }
 ]
});

在user组件中：

<div class="user-list">
        <router-link 
         v-for="item,index in dataList"
         style="padding:10px 30px;" 
         key="index"
         :to="{path:`/user/${item.tip}/${item.id}`" >{{item.userName}}</router-link>
</div>

所以此时，/user/vip/1 和/user/common/2都将映射相同的路由

一个“路径参数”使用冒号（:）标记，当匹配到一个路由时，参数值会被添加到this.$route.params，可以在每个组件内使用

注意：当使用路由参数时，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用更高效，不过这会有一个问题，就是组件的生命周期钩子不会再被调用

所以复用组件时，想要对路由参数的变化做出响应的话，可以使用watch $route对象($route)

例如像下面这样：

  export default {
      data(){
          return {
            dataList:data,
            userInfo:{}
          }
      },
      watch:{
        $route(){
          //路径发生变化，$route会重新赋值，监控了这个属性，会执行这个函数
          this.getData()
        }
      },
      created(){
        //渲染组件的时候会调用一次这个生命周期的函数，
        // 复用这个组件，这个函数不会再次被调用了
        // 地址一旦发生变化，$route会重新生成一个路由信息对象
        this.getData()

      },
      methods:{
        getData(){
          let id = this.$route.params.userId;
          if(id){
            this.userInfo = this.dataList.filter(item=>{
              return item.id == id;
            })[0]
          }else{
            this.userInfo = {}
          }
        }
      }
    }

官网中还提到一种方法是：使用 2.2 中引入的 beforeRouteUpdate 守卫

ok，上面我们提到的路由对象，$route，如果有不熟悉的，可以看$route

猜你喜欢