vue关于路由参数的传递和接收的方式
路由传参的三种方式
动态路由传参
这个是需要在route.js文件中设置动态路由
//vue页面js
window.location.href = this.baseUrl + 'hestar-pros/allocr/' + userType + '?pro=' + this.product.platCode;
这个userType就是动态路由的参数,需要在route.js中设置
//route.js页面
path: '/allocr/:userType',
name: 'allocr',
component: allocr,
然后再跳转页面中获取这个动态参数
//vue接收页面
let userType = this.$route.params.userType;
通过params传参
//vue跳转页面
this.$router.push({name: allocr,params: {
id: 123;
name: zs
}})
//vue接收页面
let id= this.$route.params.id;
let name= this.$route.params.name;
params传参方式需要用name来定位传递页面,可以通过route.js里面对应的name获得,这种传参方式对浏览器上的链接上看是不可以看到参数的,类似ajax中的post传参,这个传参方式的缺点就是如果原地刷新页面参数会丢失.
通过query传参
//vue跳转页面
this.$router.push({path: allocr,query: {
id: 123;
name: zs
}})
//或者使用更简洁的方式
this.$router.push('http://localhost:8080/hestar-pros/info?id=123&name=zs')
//vue接收页面
let id= this.$route.query.id;
let name= this.$route.query.name;
使用第一种方式是可以直白明了的将参数以键值对的方式传递,第二种方式是取链接中"?"后面的参数,且这种传参方式是可以通过浏览器的地址中看到对应的传参的,这个类似ajax中的get传参方式,如果不想被看清传参,加密也是一种方式