解決vue中使用history.replaceState?更改url?vue?router?無法感知的問題
vue中使用history.replaceState 更改url vue router 無法感知的問題
描述
最近做一個(gè)需求，URL更新不刷新頁面，在網(wǎng)上找了 好多文章都說 router.replace 更新URL不會(huì)刷新頁面（前提是路由為 history 模式），我也用了，一開始是沒問題的,可以實(shí)現(xiàn)需求，但是后來URL變得越來越復(fù)雜，會(huì)導(dǎo)致URL更新時(shí)，會(huì)觸發(fā)mounted執(zhí)行,這樣的話頁面就會(huì)刷新，后來更換了 history.replaceState API 更新URL，頁面確實(shí)不刷新了，但是也帶來了新的問題，就是 vue router 無法感知到URL的變化 ，舉個(gè)例子吧
假設(shè)
url：www.eg.com/index?a=1
使用router.replace 更新 url this.$router.replace('www.eg.com/index?a=2')
輸出 fullpath console.log(this.$route.fullPath) => www.eg.com/index?a=2
這個(gè)結(jié)果是對(duì)的；
如果使用 history.replaceState 更新url就會(huì)出現(xiàn)問題
使用 history.replaceState 更新 url history.replaceState(null,'','www.eg.com/index?a=2')；url 確實(shí)是更新了，
輸出 fullpath console.log(this.$route.fullPath) => www.eg.com/index?a=1
結(jié)論： this.$route 就沒有被更新
如何修復(fù)這個(gè)問題
// 這個(gè) stateObj 其實(shí)就是查詢參數(shù)的 key value 轉(zhuǎn)換成的對(duì)象
const stateObj = {
a:2,
b:3
}
history.replaceState(stateObj, 'title', 'www.eg.com/index?a=2&b=3')
// 將原來的 this.$route 克隆一份
const _route = Object.assign({},this.$route);
// 更新 fullPath
_route.fullPath = 'www.eg.com/index?a=2&b=3'
// 更新 參數(shù)
_route.params = stateObj
// 調(diào)用 router.history 里的更新方法 cb 傳入最新的route就可以了
this.$router.history.cb(_route)
// 我們?cè)俅屋敵?fullPath
console.log(this.$route.fullPath) => 'www.eg.com/index?a=2&b=3'
問題到這里就修復(fù)了
其實(shí) 使用 history api 更新 URL 這個(gè)功能 react router 早在 V3 版本就已經(jīng)實(shí)現(xiàn)了，話說這已經(jīng)是 5 ，6 年前的問題了， 也就是說 使用 history api 更新url react router 是可以感知到 URL 變化的并且會(huì)被記錄，但是vue沒有，還好有router.history.cb這個(gè)回掉，不然神仙都解決不了這個(gè)問題。。。。
到此這篇關(guān)于vue中使用history.replaceState 更改url vue router 無法感知的問題的文章就介紹到這了,更多相關(guān)vue url vue router內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
`package.json`是Node.js和npm項(xiàng)目的核心配置文件,定義了項(xiàng)目的元數(shù)據(jù)和依賴項(xiàng),在Vue項(xiàng)目中,它管理依賴、提供腳本命令、存儲(chǔ)項(xiàng)目信息,并通過語義化版本控制確保項(xiàng)目穩(wěn)定2025-01-01
Vue自定義v-has指令,做按鈕權(quán)限判斷的步驟
這篇文章主要介紹了Vue自定義v-has指令,做按鈕權(quán)限判斷的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
vue中$emit傳遞多個(gè)參(arguments和$event)
本文主要介紹了vue中$emit傳遞多個(gè)參(arguments和$event)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了VUE項(xiàng)目中SASS的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue?運(yùn)行高德地圖官方樣例,設(shè)置class無效的解決
這篇文章主要介紹了Vue?運(yùn)行高德地圖官方樣例,設(shè)置class無效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
如何通過Vue自帶服務(wù)器實(shí)現(xiàn)Ajax請(qǐng)求跨域(vue-cli)
從A頁面訪問到B頁面,并且要獲取到B頁面上的數(shù)據(jù),而兩個(gè)頁面所在的端口、協(xié)議和域名中哪怕有一個(gè)不對(duì)等,那么這種行為就叫跨域,這篇文章給大家介紹如何通過Vue自帶服務(wù)器實(shí)現(xiàn)Ajax請(qǐng)求跨域(vue-cli),感興趣的朋友一起看看吧2023-10-10
Vue配合iView實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)的示例代碼
本篇文章主要介紹了Vue配合iView實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)多標(biāo)簽選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了Vue仿Bibibili首頁,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語法 (即 v-slot 指令)。這篇文章主要介紹了詳解vue2.6插槽更新v-slot用法總結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-03-03