vue?url跳轉(zhuǎn)解析和參數(shù)編碼介紹

更新時(shí)間：2024年03月01日 10:06:51 作者：blakeyi

這篇文章主要介紹了vue?url跳轉(zhuǎn)解析和參數(shù)編碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

背景

最近在做url跳轉(zhuǎn)的時(shí)間遇到幾個(gè)問(wèn)題，故在此記錄一下

vue獲取當(dāng)前url

url參數(shù)是掛載在 this.$route對(duì)象上的，其中query對(duì)象是所有參數(shù)的集合，fullPath是參數(shù)字符串形式，

類似下面的：

// 比如當(dāng)前的url為 
// https://www.blakeyi.com/msgtrace/?startTime=1647864978687&endTime=1647951378687
this.$route = {
    query:{
        startTime:"1647864978687",
        endTime:"1647951378687"
    },
    fullPath:"/?startTime=1647864978687&endTime=1647951378687"
}
// 所以要獲取對(duì)應(yīng)參數(shù)直接如下
let startTime = this.$route.query["startTime "]

使用window.open打開(kāi)頁(yè)面

window.open(url, '_blank')
// 這里注意兩個(gè)點(diǎn)
// 1是使用'_blank'參數(shù)打開(kāi)新頁(yè)面
// 2是url得加上http頭,不然會(huì)在當(dāng)前網(wǎng)址下跳轉(zhuǎn), 比如說(shuō)
// url為 www.baidu.com, 這樣子并不會(huì)跳轉(zhuǎn)到百度頁(yè)面,而是跳轉(zhuǎn)到 "currentUrl/www.baidu.com" ,這樣子自然是一個(gè)無(wú)效的頁(yè)面

url參數(shù)里面有特殊字符處理

其實(shí)就是把一些特殊字符轉(zhuǎn)換為 %hex的形式，比如時(shí)間串里的冒號(hào):，它的ascii碼是3A，故轉(zhuǎn)換后為%3A， js提供了專門(mén)的函數(shù)來(lái)進(jìn)行轉(zhuǎn)換，最常用的encodeURI和encodeURIComponent，對(duì)URL編碼是常見(jiàn)的事，所以這兩個(gè)方法應(yīng)該是實(shí)際中要特別注意的。

它們都是編碼URL，唯一區(qū)別就是編碼的字符范圍

其中encodeURI方法不會(huì)對(duì)下列字符編碼 ASCII字母數(shù)字 ~!@#$&()=:/,;?+’

encodeURIComponent方法不會(huì)對(duì)下列字符編碼 ASCII字母數(shù)字 ~!()’

所以encodeURIComponent比encodeURI編碼的范圍更大。

如果你需要編碼整個(gè)URL，然后需要使用這個(gè)URL，那么用encodeURI

時(shí)間戳編碼問(wèn)題

// 注意轉(zhuǎn)為UTC時(shí)間要減8小時(shí)
let timestamp = new Date(1647953273006).getTime() - 3600 * 8 * 1000 // 減8小時(shí)
let start = timestamp - 60 * 5 * 1000 // 減5分鐘
let end = timestamp + 60 * 5 * 1000 // 減5分鐘
let startTime = parseTime(start, '{y}-{m}-ublnpf9mbT{h}:{i}:{s}.000Z')
let endTime = parseTime(end, '{y}-{m}-ublnpf9mbT{h}:{i}:{s}.000Z')

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

前端使用vue點(diǎn)擊上傳文件傳送給后端并進(jìn)行文件接收的方法
這篇文章主要介紹了如何在前端和后端實(shí)現(xiàn)文件傳輸,前端使用Vue.js發(fā)送文件,后端使用Java接收文件并處理,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
寫(xiě)一個(gè)Vue Popup組件
這篇文章主要介紹了寫(xiě)一個(gè)Vue Popup組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
Vue實(shí)現(xiàn)紅包雨小游戲的示例代碼
紅包也叫壓歲錢(qián)，是過(guò)農(nóng)歷春節(jié)時(shí)長(zhǎng)輩給小孩兒用紅紙包裹的禮金。本文將通過(guò)Vue制作一個(gè)紅包雨小游戲，文中的示例代碼講解詳細(xì)，需要的可以參考一下
2022-01-01
swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法
今天小編就為大家分享一篇swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件步驟解析
今天給大家介紹一款基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件，這個(gè)時(shí)鐘倒計(jì)時(shí)組件采用canvas動(dòng)畫(huà)的炫酷動(dòng)畫(huà)效果形式，根據(jù)剩余時(shí)間的多少變換顏色和旋轉(zhuǎn)扇形的速度，適合搶購(gòu)、拍賣、下注等業(yè)務(wù)場(chǎng)景，且對(duì)移動(dòng)端友好,需要的朋友可以參考下
2018-11-11
element-ui樹(shù)形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹(shù)的工具類
這篇文章主要介紹了element-ui樹(shù)形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹(shù)的工具類，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
vue3+elementplus前端生成圖片驗(yàn)證碼完整代碼舉例
在開(kāi)發(fā)過(guò)程中有時(shí)候需要使用圖片驗(yàn)證碼進(jìn)行增加安全強(qiáng)度,在點(diǎn)擊圖片時(shí)更新新的圖片驗(yàn)證碼,記錄此功能,以便后期使用,這篇文章主要給大家介紹了關(guān)于vue3+elementplus前端生成圖片驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下
2024-03-03
Vue消息提示this.$message方法使用解讀
這篇文章主要介紹了Vue消息提示this.$message方法使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,
2023-09-09
vue自定義翻頁(yè)組件的方法
這篇文章主要為大家詳細(xì)介紹了vue自定義翻頁(yè)組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)4
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料，介紹了Array的變異方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01