vue怎么使用encodeURI加密参数

这篇文章主要介绍“Vue怎么使用encodeURI加密参数”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue怎么使用encodeURI加密参数”文章能帮助大家解决问题。

使用encodeURI加密参数

在路由切换时页面需要使用地址栏传参，但地址栏会暴露参数的值，然后想到了encodeURI加密参数

比如参数是一个对象obj

obj：{    id: 1,    name: 'Tom'}

那么需要将参数转换为JSON字符串，在使用encodeURI加密，需要注意的是通过路由跳转的时候会自动解密一次，所以需要加两次密

let param = {         id: 1,        name: 'Tom'      }      param = encodeURI(jsON.stringify(param))      param = encodeURI(param) // 第二次加密      this.$router.push({path: `/record-index-city/${param}`,})

解密方式是使用decodeURI

let param = this.$route.params.paramparam = JSON.parse(decodeURI(param))

加密后效果：

vue路由加密传参

此处用到的是UrlEncode编码加密，首先创建一个UrlEncode.js,代码如下

const UrlEncode = {   //加密    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 UrlEncode

在main.js中引入，方便调用

import UrlEncode from './assets/js/UrlEncode.js' Vue.prototype.$UrlEncode = UrlEncode;

我这边用到的是通过路由的path进行传参，感觉加密的话用path传比较好，同时也方便其它端在调用你页面时，获取参数。

传参页面

 this.$router.push({        path: "/PropertyDetails",        query:{          key:this.$UrlEncode.encode(JSON.stringify({            type:'',            id: '',            mobile:'',            productId: '',          }))        }      });

接收页面

let params = JSON.parse(this.$UrlEncode.decode(this.$route.query.key))

关于“vue怎么使用encodeURI加密参数”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。