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中从template到jsx语法教程示例

    Vue中从template到jsx语法教程示例

    这篇文章主要为大家介绍了Vue中从template到jsx语法教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • Vue 打包后相对路径的引用问题

    Vue 打包后相对路径的引用问题

    这篇文章主要介绍了VUE 打包后相对路径的引用问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue打包优化时配置webpack的8大方案小结

    vue打包优化时配置webpack的8大方案小结

    vue-cli 生成的项目通常集成Webpack ,在打包的时候,需要webpack来做一些事情,这里我们希望它可以压缩代码体积,提高运行效率,本文为大家整理了8大webpack配置方案,希望对大家有所帮助
    2024-02-02
  • 解决vue addRoutes不生效问题

    解决vue addRoutes不生效问题

    这篇文章主要介绍了解决vue addRoutes不生效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue+element-ui表格自定义列模版的实现

    vue+element-ui表格自定义列模版的实现

    本文主要介绍了vue+element-ui表格自定义列模版的实现,通过插槽完美解决了element-ui表格自定义列模版的问题,具有一定的参考价值,感兴趣的可以了解一下
    2024-05-05
  • vue3.0 上手体验

    vue3.0 上手体验

    vue3.0 beta 版本已经发布有一段时间了,今天这篇文章就带大家体验一下,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • vue2中使用less简易教程

    vue2中使用less简易教程

    这篇文章主要介绍了vue2中使用less简易教程,由于不需要手动配置webpack,所以vue中使用less是非常简单的,只需要安装less,less-loadder就ok了
    2018-03-03
  • vue中使用sessionStorage记住密码功能

    vue中使用sessionStorage记住密码功能

    sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。这篇文章主要介绍了vue中使用sessionStorage记住密码功能,需要的朋友可以参考下
    2018-07-07
  • Vue保持用户登录状态(各种token存储方式)

    Vue保持用户登录状态(各种token存储方式)

    本文主要介绍了Vue保持用户登录状态(各种token存储方式),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue实现重置表单信息为空的方法

    vue实现重置表单信息为空的方法

    今天小编就为大家分享一篇vue实现重置表单信息为空的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论