vue的router-link中的params传参方式需要通过name属性来跳转的,且需要在路由配置的path一项后跟随冒号和参数,例如:
在路由配置页:
routes: [
{
path: '/ok/:id',
name: 'practice',
component: practice
}
]
跳转前的页面:
<router-link :to="{name:'practice',params:{id:1}}">hello</router-link>
跳转后的页面:
methods:{
fetchHello(){
console.log(this.$route.params.id)
this.message=this.$route.params.id
}
},
created(){
this.fetchHello()
}
query方法则不需要在路由配置页跟参数,只需直接用path属性跳转即可,例如:
路由配置页:
routes: [
{
path: '/ok',
name: 'practice',
component: practice
}
]
跳转前页面:
<router-link :to="{path:'/ok',query:{id:1}}">hello</router-link>
跳转后页面:
methods:{
fetchHello(){
console.log(this.$route.query.id)
this.message=this.$route.query.id
}
},
created(){
this.fetchHello()
}