父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
对应路由配置: 这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示
{
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-link :to="{path:'/one/log',query:{num:123}}">显示登录页面</router-link>
子路由组件通过 this.$route.query.num 来显示传递过来的参数
<h3>{{this.$route.query.num}}</h3>
<router-link :to="{name:'Log',params:{num:666}}">显示登录页面</router-link>
子路由获取的参数:{{this.$route.params.num}}