在vue项目里,怕刷新页面丢失参数常用query代替params,即
this.$router.push({
path:'/user/Recommend',
query:{
referrerPhone:XXXXX
}
})
这样在浏览器刷新,参数仍然跟在路由后面,不会丢失。但这样又遇到其他问题了,一般不像刷新丢失的数据,肯定是至关重要的,也是敏感的,那怎么办呢,就想到了把参数加个密,这边加密方式用的是Base64。
首先,创建一个base64.js,
const Base64 = {
//加密
encode(str) {
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
function toSolidBytes(match, p1) {
return String.fromCharCode('0x' + p1);
}));
},
//解密
decode(str) {
// Going backwards: from bytestream, to percent-encoding, to original string.
return decodeURIComponent(atob(str).split('').map(function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
}
}
export default Base64
在main.js里面引用,
import Base64 from './assets/js/base64.js'
Vue.prototype.$Base64 = Base64;
那咱们在前一个传参页面这样使用,
this.$router.push({
path: "/user/Recommend",
query:{
info:this.$Base64.encode(JSON.stringify({
name:'',
id: '',
mobile:'',
numId: '',
}))
}
});
或者直接:
this.$router.push({
path: "/user/Recommend",
query:{
info:this.$Base64.encode(XXXXX)
}
});
接收参数的页面;
let params = JSON.parse(this.$Base64.decode(this.$route.query.info))
如此甚好,至少敏感数据不会泄露。
如有问题请指正,欢迎提供更好方法。