美文网首页Vue
Vue<路由加密传参>

Vue<路由加密传参>

作者: 誰在花里胡哨 | 来源:发表于2019-07-19 17:58 被阅读9次

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

相关文章

  • Vue<路由加密传参>

    此处用到的是Base64加密,首先创建一个base64.js,代码如下 在main.js中引入,方便调用 我这边用...

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • vue路由 filters方法和filter过滤用法总结

    限制单行文字长度 路由传参写法 ---- 声明式 路由传参写法 ---- 编程式 路由传参写法 ---- 路由里要...

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • vue-router

    路由安装 路由配置 路由跳转 路由传参-param使用params传参只能使用name进行引入http://loc...

  • Vue 动态路由

    动态路由 动态路由传参

  • vue中组件3种编程式路由跳转传参

    路由传参 1、路由配置传参(刷新页面不会丢失参数,url会携带参数) A组件跳转B组件传参A组件 路由配置 B组件...

  • vue路由传参.md

    两种传参方法 1.命名路由传参(name, params方式) 2.路由路径传参(path, query方式...

  • 路由传参

    路由传参

  • 八、Flutter路由

    目录一、基本路由二、基本路由传参三、命名路由四、命名路由传参五、替换路由六、返回到根路由 一、基本路由 跳转到De...

网友评论

    本文标题:Vue<路由加密传参>

    本文链接:https://www.haomeiwen.com/subject/dhislctx.html