Vue之路由的query传参加密解密

首先，创建一个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))

如此甚好，至少敏感数据不会泄露。

Vue之路由的query传参加密解密相关推荐

vue路由传参两种方式；vue路由传参query与params区别；vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path；
vue项目的路由传参常用的有两种方式:query和params 1.query传参特点:1.1可以用path也可以用name传递路径注意name是路由页面vue文件的名称不需要/1.2跳转页面地址 ...
vue动态路由传参---query传参和params传参
当一个页面跳转到另一个页面时,组件结构相同,只是内容不同且地址栏后缀不同 ,这个地址栏的后缀就是参数,根据不同参数渲染不同的内容,这个跳转就叫路由传参. 当项目中组件间通过路由跳转,有时,我们需要传递 ...
vue 中的动态传参和query传参
Vue router 如何传参 params.query 是什么? params:/router1/:id,这里的 id 叫做 params.例如/router1/123, /router1/789 ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
vue路由跳转传参的几种方式
需求是跳转至工单申请详情页面 vue.js中路由配置代码: import Layout from '@/layout'const repairRouter = {path: '/repair',co ...
vue路由跳转传参乱码解决
vue路由组件跳转传参中文乱码解决 -在路由传参 this.$router.push({path:"/index", query:{msg:encodeURI("我是消息 ...
@query传参_前端框架vue中query和params传参
注意(用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空.(传参强烈建议适用string)) 也可以选用sessionstorage/loc ...
路由声明式传参和编程式传参
声明式传参(使用带href /或本质上是a标签的时候) 直接带路径里带携带参数下例在地址栏是可以看到参数的(querys传参) 在vue.tools插件里可以观察到取出路径参数的方式 param ...

Vue之路由的query传参加密解密

Vue之路由的query传参加密解密相关推荐

最新文章

热门文章