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

目录
  • 使用encodeURI加密参数
    • 比如参数是一个对象obj
    • 解密方式是使用decodeURI
  • vue路由加密传参
    • 传参页面
    • 接收页面

使用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))

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue路由传参的基本实现方式小结【三种方式】

    本文实例讲述了vue路由传参的基本实现方式.分享给大家供大家参考,具体如下: 前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式. 方式一:params 传参(显示参数) params 传参(显示参数)又可分为 声明式 和 编程式 两种方式 1.声明式 router-link 该方式是通过 router-

  • 关于vue中路由的跳转和参数传递,参数获取

    目录 vue中的路由讲三点 html中通过<router-link>指令完成路由跳转 第一种情况就是以path形式 第二种情况就是以路由对象Object的形式 最后谈谈$router和$route地区别 结论:没有任何关系 vue中的路由讲三点 第一点: 指令级别的路由<router-link>和程序级别的路由router.push(); 第二点: 通过query和params传递参数和path和name之间的关系. 第三点: $router和$route地区别 声明:由于路由和传

  • vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

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

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

    目录 使用encodeURI加密参数 比如参数是一个对象obj 解密方式是使用decodeURI vue路由加密传参 传参页面 接收页面 使用encodeURI加密参数 在路由切换时页面需要使用地址栏传参,但地址栏会暴露参数的值,然后想到了encodeURI加密参数 比如参数是一个对象obj obj:{     id: 1,     name: 'Tom' } 那么需要将参数转换为JSON字符串,在使用encodeURI加密,需要注意的是通过路由跳转的时候会自动解密一次,所以需要加两次密 let

  • Vue 路由传参加密的示例代码

    首先,创建一个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 bytestre

  • vue路由传参方式的方式总结及获取参数详解

    目录 一.声明式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 二.编程式传参 1.params传参(显示参数) 2.params传参(不显示参数) 3.query 传参 三.获取参数 1.params的获取方式 2.query的获取方式 四.需要注意的点 总结 一.声明式传参 1.params传参(显示参数) 在url中会显示出传参的值,刷新页面不会失去拿到的参数,使用该方式传值的时候,需要子路由提前配置好参数: //路由参数配置 const

  • Vue路由传参及props解耦深入分析

    目录 一.路由传参 query传参 query配合声明式导航 query配合编程式导航 query传参的特点 params传参 路径使用参数占位时 路径不使用占位时 二.props解耦 1.props布尔值 2.props函数模式 3.props对象模式 关于路由传参的几种方式,众说纷纭.今天来总结下路由传参的几种方式与路由解耦: 一.路由传参 路由传参总的来说有两种方式,query和params,配合声明式导航与编程式导航,各有不同的几种写法: query传参 query配合声明式导航 //路

  • 详解Vue路由传参的两种方式query和params

    Vue路由传参的两种方式query和params 一.router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to=&

  • Vue路由传参详细介绍

    Vue路由传参详细介绍

    目录 路由传参 效果展示 params的类型(后附源码) ​​​​​​query参数的类型 路由name 路由传参 效果展示 通过传参,可以让Persons路由组建中的内容,在新的路由组件Show显示出来,Show路由组件要嵌套到Persons路由组件中 Persons路组件中的内容 params的类型(后附源码) path:‘show/:id/:realname’ :id/:realname,是为传参所声明的,props:true 可以理解成可以传参,这只是其中的一种方法,也是个人觉得最简单理

  • vue路由传参接收以及传参对象为对象时的问题及解决

    目录 路由传参接收以及传参对象为对象时的问题 场景 接收路由参数 vue路由传参总结 Vue路由传参 路由传参接收以及传参对象为对象时的问题 具体代码如下所示: 场景 <div @click='toDetail'>查看详情</div> 路由传参不能直接传一个对象,需要使用JSON.stringify()方法将其转换成一个字符串,然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象 const router = useRouter() const toDetail

  • Vue路由传参页面刷新后参数丢失原因和解决办法

    目录 vue路由传参方法 原因分析: 解决方案: 总结 vue路由传参方法 在编写vue项目时,时常会使用路由在不同页面中传递参数,常见使用方式如下: this.$router.push({ path: "/test", query: { a: 1, b: 2 } }) 这样我们就传递了两个参数,在 /test  页面 就可以接收这两个参数 let a = this.$route.query.a; let b = this.$route.query.b; 可以看到浏览器进行了url参数

随机推荐