Vue路由传参

最新推荐文章于 2024-01-24 10:09:19 发布

皮皮明

最新推荐文章于 2024-01-24 10:09:19 发布

阅读量101

点赞数 1

文章标签： Vue

本文链接：https://blog.csdn.net/qq_42267036/article/details/88987057

版权

方案一：

  getDescribe(id) {//   直接调用$router.push 实现携带参数的跳转
    this.$router.push({
      path: `/describe/${id}`,
    })

方案一，需要对应路由配置如下：
{
path: ‘/describe/:id’,
name: ‘Describe’,
component: Describe
}
很显然，需要在path中添加/:id来对应 $r o u t e r . p u s h 中 p a t h 携带的参数。在子组件中可以使用来获取传递的参数值。 t h i s .$ route.params.id

方案二：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this. $r o u t e r . p u s h (n a m e :^{'} D e s c r i b e^{'}, p a r a m s : i d : i d) 对应路由配置 : 注意这里不能使用 : / i d 来传递参数了，因为父组件中，已经使用 p a r a m s 来携带参数了。 p a t h :^{'} / d e s c r i b e^{'}, n a m e :^{'} D e s c r i b e^{'}, c o m p o n e n t : D e s c r i b e 子组件中 : 这样来获取参数 t h i s .$ route.params.id

方案三：

父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
this.$router.push({
path: ‘/describe’,
query: {
id: id
}
})
对应路由配置：
{
path: ‘/describe’,
name: ‘Describe’,
component: Describe
}
对应子组件: 这样来获取参数

this.$route.query.id