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

const User = {
  template: '<div>User</div>'
}

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

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

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

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

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

html代码展示： 

  <ul class="porduct_content_div1_ul">
                  <li
                    @click="toTask(v)"
                    v-for="v in productData[0].products"
                    :key="v.id"
                  >
                    {{ v.name }}
                  </li>
                </ul>

js 代码展示： 

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

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

 <div class="content_banner_img">
            <h1 class="content_banner_img_h1">{{ this.$route.params.id }}</h1>
            <p class="content_banner_img_p">5656</p>
            <span class="content_banner_img_span">立即使用</span>
          </div>

效果展示：