动态路由匹配

秒速五厘米 2022-05-19 01:36 245阅读 0赞

我们经常需要把某种模式匹配到的所有路由，全部映射到同个组件，那么我们可以在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][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][route]

[route]: https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1