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中從template到j(luò)sx語法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要介紹了VUE 打包后相對(duì)路徑的引用問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue打包優(yōu)化時(shí)配置webpack的8大方案小結(jié)
vue-cli?生成的項(xiàng)目通常集成Webpack?,在打包的時(shí)候,需要webpack來做一些事情,這里我們希望它可以壓縮代碼體積,提高運(yùn)行效率,本文為大家整理了8大webpack配置方案,希望對(duì)大家有所幫助2024-02-02
這篇文章主要介紹了解決vue addRoutes不生效問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue+element-ui表格自定義列模版的實(shí)現(xiàn)
本文主要介紹了vue+element-ui表格自定義列模版的實(shí)現(xiàn),通過插槽完美解決了element-ui表格自定義列模版的問題,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
vue3.0 beta 版本已經(jīng)發(fā)布有一段時(shí)間了，今天這篇文章就帶大家體驗(yàn)一下，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了vue2中使用less簡易教程，由于不需要手動(dòng)配置webpack，所以vue中使用less是非常簡單的，只需要安裝less，less-loadder就ok了2018-03-03
sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。這篇文章主要介紹了vue中使用sessionStorage記住密碼功能,需要的朋友可以參考下2018-07-07
Vue保持用戶登錄狀態(tài)(各種token存儲(chǔ)方式)
本文主要介紹了Vue保持用戶登錄狀態(tài)(各種token存儲(chǔ)方式)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
今天小編就為大家分享一篇vue實(shí)現(xiàn)重置表單信息為空的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09