vue关于路由参数的传递和接收的方式

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传参方式,如果不想被看清传参,加密也是一种方式

需要注意的是如果通过params传参需要通过name字段,需要用query传参的话 就是需要用path字段,跳转链接用的是$rouer对象(这个是全局的路由对象),接收的是用$route对象(这个是当前页面的路由对象)