1、直接调用$router.push()进行传参
直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
在子组件中可以使用来获取传递的参数值
this.$route.params.id
2、router-link进行传参
父组件中:使用<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>标签进行导航
<router-link to="/child/123"></router-link>
子组件中:使用this.$route.params.id来接收路由参数
this.$route.params.id
3、通过路由属性中的name属性来确定匹配路由,通过params来传递参数
this.$router.push({
name: '/describe',
params: {
id: id
}
})
对应路由配置
{
path: '/describe',
name: 'Describe',
component: Describe
}
子组件接收参数
this.$route.params.id
4、通过路由属性中的path属性来确定匹配路由,通过query来传递参数
this.$router.push({
path: '/describe',
query: {
id: id
}
})
对应路由配置
{
path: '/describe',
name: 'Describe',
component: Describe
}
子组件接收参数
this.$route.query.id
注意:
接收参数时,是this.$route,不是this.$router