首页 > 其他分享 >Vue 路由传参加密

Vue 路由传参加密

时间:2022-12-12 17:14:00浏览次数:74  
标签:Vue return Base64 js str encode 参加 路由

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

使用页面:

this.$router.push({
  path: "/user/Recommend",
  query:{
    info:this.$Base64.encode(XXXXX)//this.$Base64.encode(JSON.stringify(row))
  }
});

接受参数页面:

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

 

标签:Vue,return,Base64,js,str,encode,参加,路由
From: https://www.cnblogs.com/ZYSZBD/p/16976551.html

相关文章

  • 轻量前后端分离简单网页版聊天(Spring Boot+WebSocket+Vue)Demo实现
    WebSocket是啥?在HTTP协议中,所有的请求都是由客户端发起的,由服务端进行响应,服务端无法向客户端推送消息,但是在一些需要即时通信的应用中,又不可避免地需要服务端向客户端推......
  • 思科路由器关联RADIUS服务器配置命
    Cisco(config)#aaanew-model //全局启动aaa1.关联Tacacs+服务器Cisco(config)#tacacsservers2Cisco(config-server-tacacs)#addCisco(config-server-tacacs)#addr......
  • Vue.js 学习笔记
    我想要的,时间自然会给我。年龄也不会是我的阻碍,反而会是我的骄傲。:我不用在某个年龄段必须做某事,不要让任何人打乱自己的节奏。---------------------摘加油生活:我要努力呀......
  • How To Focus An Input In Vue?
    1-HowtoSetFocusonanInputinVue?Sometimesit’simportanttosetfocusoninput(programmaticallyorbydefault),itisoftenforaccessibility,and/or......
  • Vue3.0文档学习心得--响应式工具
    1.isRef:检查某个值是否为ref。返回值是true或者falseletfoo:unknown//返回值是一个类型判定 (typepredicate),这意味着 isRef 可以被用作类型守卫。if(isRe......
  • Django路由层
    路由层当⽤户在您的Web应⽤程序上发出⻚⾯请求时,Django会获取url中请求路径(端⼝之后的部分),然后通过urls.py⽂件查找与路径相匹配的视图,然后返回HTML响应或404未找到的错......
  • vue实现瀑布流
    <template><divid="app"><ul><liref='waterfallItem'v-for="(item,index)inwaterfallArr":key="index">......
  • 「Vue系列」之Vue2实现当前组件重新加载
     遇到问题的场景:需要把当前组件完全还原成初始化状态,不要页面全部刷新例如:重置按钮,只刷新当前加载组件其他办法:使用vue-router重新定向到当前页面,页面不刷新使用window-r......
  • vue3 封装t点击左右箭头实现内容滑动组件
    1、组件<template><divclass="switch-tab"><divclass="switch-tab-left"@click="leftClick"><el-icon:size="24"color="rgba(99,149,255,1)"><A......
  • 项目启动报错: Vue 报错error:0308010C:digital envelope routines::unsupported
      Vue报错error:0308010C:digitalenveloperoutines::unsupported查了好多,找出原因:因为我刚装了最新的node版本18.12.1出现这个错误是因为 node.jsV17版本中最......