版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/TheBestAge/article/details/88529554
路由传参跳转
在vue的项目中会用到页面之间进行转换,并且需要路由传参的情况。路由传参跳转具体分为以下三种:
1.使用params
params传参配置的是name,在路由配置中必须设置参数,传参刷新失效
跳转页面:
Isend(){
this.$router.push({
name: 'order-tip',
params:{
ownername:'1'
}
})
},
跳转后页面,接受数据,在这里使用了生命周期钩子函数,注意此处为$route:
($router:路由操作对象,只写对象; $route:路由信息对象,只读对象)
export default {
data(){
return{
ownername:''
}
},
created(){
this.getRouteData()
},
methods:{
getRouteData(){
this.ownername=this.$route.params.ownername
console.log('ownername',this.ownername)
}
}
}
跳转后可以在页面看到出现值,但刷新后消失
2.使用query
query传参配置的是path(name也可以),在路由配置中不需要设置参数,但传递的参数会显示在地址栏中,并且会保存传递过来的值,刷新不变。
跳转页面可以使用path或name:
Isend(){
this.$router.push({
path: '/order-tip',
query:{
ownername:'1'
}
})
}
跳转后页面,接受数据,接受参数基本上一致:
export default {
data(){
return{
ownername:''
}
},
created(){
this.getRouteData()
},
methods:{
getRouteData(){
this.ownername=this.$route.query.ownername
console.log('ownername',this.ownername)
}
}
}
跳转后可以在页面看到出现值,地址栏中有参数,并且刷新后值仍存在
3.修改路由配置,添加参数
{
path:'/order-tip/:ownername',
name:'order-tip' ,
meta:{
hideInMenu:true
},
component: ()=>import("@/view/canteen/current-tip/order-tip.vue")
直接在路径后传递值1:
Isend(){
this.$router.push({
path: '/order-tip/1',
})
}
跳转后页面,接受数据:
this.$route.params.ownername
结果:
跳转后可以在页面看到出现值,刷新后仍存在