vue 动态路由匹配（页面跳转到同一个页面）

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

const User = {
  template: '
User
'
}

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

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

const User = {
  template: '
User {{ $route.params.id }}
'
}

举一个简单的例子：
1. 先定义一个动态路由

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/detail/:id",
    name: "productDetail",
    component: () =>
      import(
        /*webpackChunkName:'productDetail' */ "../views/productDetail/detail1.vue"
      ),
  },
];

html代码展示： 

  

                  

                    {{ v.name }}
                  
                

js 代码展示： 

    toTask(value) {
      //任务协同
      // 跳转页面
      // console.log(value);
      this.contentmouseleave(); //关闭下拉
      this.$router.push({
        path: `/detail/${value.id}`,
      }); //跳转页面

页面跳转之后，页面展示的id值：

 

            
{{ this.$route.params.id }}
            
5656
            立即使用
          

 

效果展示：