现有如下场景，点击父组件的 li 元素跳转到子组件中，并携带参数，便于子组件获取数据。
父组件中：
<li v-for="article in articles" @click="getDescribe(article.id)"> |
methods：
# 方案一：
getDescribe(id) { | |
// 直接调用 $router.push 实现携带参数的跳转 | |
this.$router.push({ | |
path: `/describe/${id}`, | |
}) |
方案一，需要对应路由配置如下：
{ | |
path: '/describe/:id', | |
name: 'Describe', | |
component: Describe | |
} |
很显然，需要在 path 中添加 /:id 来对应 $router.push 中 path 携带的参数。在子组件中可以使用来获取传递的参数值。
this.$route.params.id |
# 方案二：
父组件中：通过路由属性中的 name 来确定匹配的路由，通过 params 来传递参数。
this.$router.push({ | |
name: 'Describe', | |
params: { | |
id: id | |
} | |
}) |
对应路由配置：注意这里不能使用:/id 来传递参数了，因为父组件中，已经使用 params 来携带参数了。
{ | |
path: '/describe', | |
name: 'Describe', | |
component: Describe | |
} |
子组件中：这样来获取参数
this.$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 |
这里要特别注意 在子组件中 获取参数的时候是router 这很重要
