vue?url跳轉(zhuǎn)解析和參數(shù)編碼介紹
更新時間：2024年03月01日 10:06:51 作者：blakeyi
這篇文章主要介紹了vue?url跳轉(zhuǎn)解析和參數(shù)編碼,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
背景
最近在做url跳轉(zhuǎn)的時間遇到幾個問題，故在此記錄一下
vue獲取當前url
url參數(shù)是掛載在 this.$route對象上的，其中query對象是所有參數(shù)的集合，fullPath是參數(shù)字符串形式，
類似下面的：
// 比如當前的url為
// https://www.blakeyi.com/msgtrace/?startTime=1647864978687&endTime=1647951378687
this.$route = {
query:{
startTime:"1647864978687",
endTime:"1647951378687"
},
fullPath:"/?startTime=1647864978687&endTime=1647951378687"
}
// 所以要獲取對應參數(shù)直接如下
let startTime = this.$route.query["startTime "]使用window.open打開頁面
window.open(url, '_blank') // 這里注意兩個點 // 1是使用'_blank'參數(shù)打開新頁面 // 2是url得加上http頭,不然會在當前網(wǎng)址下跳轉(zhuǎn), 比如說 // url為 www.baidu.com, 這樣子并不會跳轉(zhuǎn)到百度頁面,而是跳轉(zhuǎn)到 "currentUrl/www.baidu.com" ,這樣子自然是一個無效的頁面
url參數(shù)里面有特殊字符處理
其實就是把一些特殊字符轉(zhuǎn)換為 %hex的形式， 比如時間串里的冒號:， 它的ascii碼是3A， 故轉(zhuǎn)換后為%3A， js提供了專門的函數(shù)來進行轉(zhuǎn)換，最常用的encodeURI和encodeURIComponent，對URL編碼是常見的事，所以這兩個方法應該是實際中要特別注意的。
它們都是編碼URL，唯一區(qū)別就是編碼的字符范圍
其中encodeURI方法不會對下列字符編碼 ASCII字母 數(shù)字 ~!@#$&()=:/,;?+’
encodeURIComponent方法不會對下列字符編碼 ASCII字母 數(shù)字 ~!()’
所以encodeURIComponent比encodeURI編碼的范圍更大。
如果你需要編碼整個URL，然后需要使用這個URL，那么用encodeURI
時間戳編碼問題
// 注意轉(zhuǎn)為UTC時間要減8小時
let timestamp = new Date(1647953273006).getTime() - 3600 * 8 * 1000 // 減8小時
let start = timestamp - 60 * 5 * 1000 // 減5分鐘
let end = timestamp + 60 * 5 * 1000 // 減5分鐘
let startTime = parseTime(start, '{y}-{m}-vvxyksv9kdT{h}:{i}:{s}.000Z')
let endTime = parseTime(end, '{y}-{m}-vvxyksv9kdT{h}:{i}:{s}.000Z')總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何在前端和后端實現(xiàn)文件傳輸,前端使用Vue.js發(fā)送文件,后端使用Java接收文件并處理,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了寫一個Vue Popup組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
紅包也叫壓歲錢，是過農(nóng)歷春節(jié)時長輩給小孩兒用紅紙包裹的禮金。本文將通過Vue制作一個紅包雨小游戲，文中的示例代碼講解詳細，需要的可以參考一下2022-01-01
swiper在vue項目中l(wèi)oop循環(huán)輪播失效的解決方法
今天小編就為大家分享一篇swiper在vue項目中l(wèi)oop循環(huán)輪播失效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天給大家介紹一款基于vue2的canvas時鐘倒計時組件，這個時鐘倒計時組件采用canvas動畫的炫酷動畫效果形式，根據(jù)剩余時間的多少變換顏色和旋轉(zhuǎn)扇形的速度，適合搶購、拍賣、下注等業(yè)務場景，且對移動端友好,需要的朋友可以參考下2018-11-11
element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類
這篇文章主要介紹了element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
vue3+elementplus前端生成圖片驗證碼完整代碼舉例
在開發(fā)過程中有時候需要使用圖片驗證碼進行增加安全強度,在點擊圖片時更新新的圖片驗證碼,記錄此功能,以便后期使用,這篇文章主要給大家介紹了關(guān)于vue3+elementplus前端生成圖片驗證碼的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue消息提示this.$message方法使用,具有很好的參考價值,希望對大家有所幫助,2023-09-09
這篇文章主要為大家詳細介紹了vue自定義翻頁組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)4
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)的相關(guān)資料，介紹了Array的變異方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01