版权声明:如果喜欢,就收藏吧 O(∩_∩)O~ https://blog.csdn.net/caseywei https://blog.csdn.net/caseywei/article/details/89505460
1、query方式
(push时使用path来匹配)
发起页面:
this.$router.push({
path: "/accept", //接收页面路由
query: {
id: 222
}
});
路由配置:
routes: [{
path: "/accept"
}]
接受参数页面:
export default{
data(){
return{
id:this.$router.query.id; //这里接收参数
}
}
}
跳转转收页面的时候,地址栏会显示:
http://ip:port/accept?id=222
扫描二维码关注公众号,回复:
6170129 查看本文章
2、params模式
(push时使用name来匹配)
发起页面:
this.$router.push({
name: "accept", //路由配置中的name
params:{
id:222
}
});
路由配置:
routes: [{
name: "accept",
path: "/accept"
}]
接收参数页面:
export default{
data(){
return{
id:this.$router.params.id; //这里接收
}
}
}
跳转转收页面的时候,地址栏显示目的地址,不带任何参数
3、location预声明参数模式
(push使用path来匹配,但是它跟params模式不同)
发起页面:
this.$router.push({
path: '/accept/222'
});
路由配置:
routes: [{
path: "/accept/:id"
}]
接收参数页面:
export default{
data(){
return{
id: this.$router.params.id
}
}
}
路由跳转时,url会显示:
http://ip:port/accept/222