vue路由傳參-如何使用encodeURI加密參數(shù)
更新時(shí)間：2022年06月14日 14:50:14 作者：Hello攻城獅
這篇文章主要介紹了vue路由傳參-如何使用encodeURI加密參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
使用encodeURI加密參數(shù)
在路由切換時(shí)頁面需要使用地址欄傳參，但地址欄會(huì)暴露參數(shù)的值，然后想到了encodeURI加密參數(shù)
比如參數(shù)是一個(gè)對(duì)象obj
obj：{
?? ?id: 1,
?? ?name: 'Tom'
}那么需要將參數(shù)轉(zhuǎn)換為JSON字符串，在使用encodeURI加密，需要注意的是通過路由跳轉(zhuǎn)的時(shí)候會(huì)自動(dòng)解密一次，所以需要加兩次密
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編碼加密，首先創(chuàng)建一個(gè)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中引入，方便調(diào)用
import UrlEncode from './assets/js/UrlEncode.js'? Vue.prototype.$UrlEncode = UrlEncode;
我這邊用到的是通過路由的path進(jìn)行傳參，感覺加密的話用path傳比較好，同時(shí)也方便其它端在調(diào)用你頁面時(shí)，獲取參數(shù)。
傳參頁面
?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))
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?報(bào)錯(cuò)-4058?ENOENT:no?such?file?or?directory的原因及解決方法
Vue?報(bào)錯(cuò)-4058?ENOENT:?no?such?file?or?directory的原因和解決辦法,關(guān)于為什么為會(huì)報(bào)這個(gè)錯(cuò)誤,按照字面意思的理解就是沒有找到這個(gè)文件或這個(gè)路徑,說明是路徑不對(duì),本文給大家分享解決方案,感興趣的朋友一起看看吧2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue組件watch屬性實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Mint UI組件庫CheckList使用及踩坑總結(jié)
這篇文章主要介紹了Mint UI組件庫CheckList使用及踩坑總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
vue如何使用element-ui 實(shí)現(xiàn)自定義分頁
這篇文章主要介紹了vue如何使用element-ui 實(shí)現(xiàn)自定義分頁,可以通過插槽實(shí)現(xiàn)自定義的分頁,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了關(guān)于vue.extend的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
在本篇文章里小編給大家整理的是一篇關(guān)于vue中進(jìn)行微博分享的實(shí)例內(nèi)容，有需要的朋友們可以參考下。2019-10-10
Vue 中使用虛擬 dom 且根據(jù) diff 算法進(jìn)行新舊 DOM 對(duì)比，從而更新真實(shí) dom ，key 是虛擬 DOM 對(duì)象的唯一標(biāo)識(shí), 在 diff 算法中 key 起著極其重要的作用，本文講解 key 的作用以及為什么最好不要使用 index 作為 key 的屬性值2021-11-11
這篇文章主要介紹了為什么推薦使用JSX開發(fā)Vue3，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue中Echarts使用動(dòng)態(tài)數(shù)據(jù)的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了vue中Echarts使用動(dòng)態(tài)數(shù)據(jù)的兩種實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue3+vite相對(duì)路徑的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06