vue路由传参

方案一：直接调用$router.push 实现携带参数的跳转

  this.$router.push({

      path: `/describe/${id}`,

    })

路由配置：

{

    path: '/describe/:id',

    name: 'Describe',

    component: Describe

  }

子组件获取参数：$route.params.id

方案二：通过路由属性中的name来确定匹配的路由，通过params来传递参数

this.$router.push({

          name: 'Describe',

          params: {

            id: id

          }

        })

对应路由配置:

{

    path: '/describe',

    name: 'Describe',

    component: Describe

  }

子组件获取参数：$route.params.id

方案三:使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({

          path: '/describe',

          query: {

            id: id

          }

        })

对应路由配置：

{

    path: '/describe',

    name: 'Describe',

    component: Describe

  }

子组件接收参数：$route.query.id