vue 路由传参的三种基本模式

发表于 更新于 分类于

方案一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
getDescribe(id) {
  // 直接调用$router.push 实现携带参数的跳转
  this.$router.push({
    path: `/describe/${id}`,
  })
}

// 方案一，需要对应路由配置如下：
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
// 很显然，需要在 path 中添加/:id 来对应 $router.push 中path携带的参数。
// 在子组件中可以使用来获取传递的参数值。
// $route.params.id

方案二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 父组件中：通过路由属性中的 name 来确定匹配的路由，通过 params 来传递参数。
this.$router.push({
  name: 'Describe',
  params: {
      id: id
  }
})

// 对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
{
    path: '/describe',
    name: 'Describe',
    component: Describe
}
//子组件中: 这样来获取参数
// $route.params.id

方案三：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 父组件：使用 path 来匹配路由，然后通过 query 来传递参数
// 这种情况下 query 传递的参数会显示在 url 后面?id=？
this.$router.push({
  path: '/describe',
  query: {
      id: id
  }
})

// 对应路由配置：
{
    path: '/describe',
    name: 'Describe',
    component: Describe
}
// 对应子组件: 这样来获取参数
// $route.query.id
// 这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是$router 这很重要~~~