vue 跳转路由参数加密

此处用到的是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;

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

传参页面：

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

接收页面：

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

作者：誰在花里胡哨
链接：https://www.jianshu.com/p/3dd13c221e3d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Tags：

转载：转载说明/web/wzjs/49.html

很赞哦！ ()