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è)問題，故在此記錄一下

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打開頁(yè)面

window.open(url, '_blank')
// 這里注意兩個(gè)點(diǎn)
// 1是使用'_blank'參數(shù)打開新頁(yè)面
// 2是url得加上http頭,不然會(huì)在當(dāng)前網(wǎng)址下跳轉(zhuǎn), 比如說
// 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提供了專門的函數(shù)來(lái)進(jìn)行轉(zhuǎn)換，最常用的encodeURI和encodeURIComponent，對(duì)URL編碼是常見的事，所以這兩個(gè)方法應(yīng)該是實(shí)際中要特別注意的。

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

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

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

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

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

時(shí)間戳編碼問題

// 注意轉(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}-wppm3vysvbpT{h}:{i}:{s}.000Z')
let endTime = parseTime(end, '{y}-{m}-wppm3vysvbpT{h}:{i}:{s}.000Z')