前言

在重構(gòu)我的 vue-use-sync-url（輔助將數(shù)據(jù)和 url 參數(shù)進(jìn)行同步的工具庫）時，遇到了一個使用 window.history.pushState 來修改地址欄的 url 參數(shù)的 bug，準(zhǔn)確來說是 vue-router 的 bug，下面就來講講具體是怎么回事。

問題

場景如下，有一個輸入框里面輸入了內(nèi)容，點(diǎn)擊搜索按鈕使用 window.history.pushState 將數(shù)據(jù)同步到 url 參數(shù)上。然后再點(diǎn)擊 go about 按鈕跳轉(zhuǎn)到別的頁面，關(guān)鍵的來了，這時候你點(diǎn)擊瀏覽器左上角的回退按鈕回到剛才的頁面，url 上的 keywords 參數(shù)變沒了! 這里上個測試鏈接 codesandbox

<script setup>
import { ref } from "vue";
const keywords = ref("123")
const handleClick = () => {
  window.history.pushState({}, "", `${window.location.pathname}?keywords=${keywords.value}`)
}
</script>
<template>
  <input v-model="keywords" />
  <button @click="handleClick">搜索</button>
  <router-link to="/about">go about</router-link>
</template>

追根溯源

一開始想是不是我寫的有問題？測試了 vue2-router 和 react-router 都沒有這個問題，所以我就將問題鎖定在了 vue3-router 了。因?yàn)?router-link 和直接執(zhí)行了 router.push 操作是一樣的，所以我就去找 push 操作所在的源碼位置，最終在 packages/router/src/history/html5.ts 中找到了如下代碼。

可以看到在這個 push 函數(shù)中，在第 288 行，執(zhí)行了一次 replace 的操作，而在第 297 行才是真正的 push 操作。我將第 288 行注釋之后，上面的 demo 就跑通了，但是直覺告訴我它這里這么做是有原因的，但是想弄明白估計得將整個庫的源碼看完，沒有這個精力。直接提了個 issue，在它的 github issue 中我發(fā)現(xiàn)了好幾個由于這個第 288 行代碼產(chǎn)生的問題，例如 #1416、#1526、#1529。維護(hù)者在我的 issue 中是這么回答的。

結(jié)合他在其它 issue 中的回答，大概是如下這么個意思。直接使用 history api，路由器是不知道的，應(yīng)該避免使用，最好使用 router.push 來進(jìn)行更改。還說到第 288 行對于更新當(dāng)前歷史記錄條目是必要的，以便能夠通過導(dǎo)航守衛(wèi)取消ui 發(fā)起的導(dǎo)航。它允許知道導(dǎo)航的方向和在歷史堆棧中的相對位置。不幸的是，目前還沒有其他方法可以做到這一點(diǎn)。

我補(bǔ)充道，在 vue2 和 react 中沒有這個問題，你不覺得這是個 bug 嗎？他說在 vue2 中使用 hisotry api 可能會產(chǎn)生你沒有遇到過的問題，vue-router 在 vue3 中比 vue2 擁有更多的功能等等。

解決

沒辦法，維護(hù)者不覺得這是個 bug，最后只能妥協(xié)使用 router.push 來解決，并將 vue-router 的依賴添加到 peerDependencies 中。在一些場景下，如果想封裝一個庫在各個框架中共同使用就不行了，在這里必須使用 router.push 才可以，我覺得還是不太好的。

以上就是vue3不能使用history.pushState修改url參數(shù)踩坑的詳細(xì)內(nèi)容，更多關(guān)于vue3修改url參數(shù)踩坑的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論