vue路由传参-如何使用encodeURI加密参数

 更新时间:2022年06月14日 14:50:14   作者:Hello攻城狮  
这篇文章主要介绍了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.param
param = 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 报错-4058 ENOENT:no such file or directory的原因及解决方法

    Vue 报错-4058 ENOENT:no such file or directory的原因及解决方法

    Vue 报错-4058 ENOENT: no such file or directory的原因和解决办法,关于为什么为会报这个错误,按照字面意思的理解就是没有找到这个文件或这个路径,说明是路径不对,本文给大家分享解决方案,感兴趣的朋友一起看看吧
    2023-10-10
  • vue组件watch属性实例讲解

    vue组件watch属性实例讲解

    这篇文章主要为大家详细介绍了vue组件watch属性实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Mint UI组件库CheckList使用及踩坑总结

    Mint UI组件库CheckList使用及踩坑总结

    这篇文章主要介绍了Mint UI组件库CheckList使用及踩坑总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue如何使用element-ui 实现自定义分页

    vue如何使用element-ui 实现自定义分页

    这篇文章主要介绍了vue如何使用element-ui 实现自定义分页,可以通过插槽实现自定义的分页,本文通过实例图文相结合给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-07-07
  • 关于vue.extend的使用及说明

    关于vue.extend的使用及说明

    这篇文章主要介绍了关于vue.extend的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue中进行微博分享的实例讲解

    vue中进行微博分享的实例讲解

    在本篇文章里小编给大家整理的是一篇关于vue中进行微博分享的实例内容,有需要的朋友们可以参考下。
    2019-10-10
  • Vue 中为什么不推荐用index 做 key属性值

    Vue 中为什么不推荐用index 做 key属性值

    Vue 中使用虚拟 dom 且根据 diff 算法进行新旧 DOM 对比,从而更新真实 dom ,key 是虚拟 DOM 对象的唯一标识, 在 diff 算法中 key 起着极其重要的作用,本文讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值
    2021-11-11
  • 为什么推荐使用JSX开发Vue3

    为什么推荐使用JSX开发Vue3

    这篇文章主要介绍了为什么推荐使用JSX开发Vue3,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • vue中Echarts使用动态数据的两种实现方式

    vue中Echarts使用动态数据的两种实现方式

    这篇文章主要介绍了vue中Echarts使用动态数据的两种实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue3+vite相对路径的处理方式

    vue3+vite相对路径的处理方式

    这篇文章主要介绍了vue3+vite相对路径的处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06

最新评论