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