vue3不能使用history.pushState修改url參數踩坑
前言
在重構我的 vue-use-sync-url(輔助將數據和 url 參數進行同步的工具庫)時,遇到了一個使用 window.history.pushState
來修改地址欄的 url 參數的 bug,準確來說是 vue-router
的 bug,下面就來講講具體是怎么回事。
問題
場景如下,有一個輸入框里面輸入了內容,點擊搜索按鈕使用 window.history.pushState
將數據同步到 url 參數上。然后再點擊 go about
按鈕跳轉到別的頁面,關鍵的來了,這時候你點擊瀏覽器左上角的回退按鈕回到剛才的頁面,url 上的 keywords
參數變沒了! 這里上個測試鏈接 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
了。因為 router-link
和直接執(zhí)行了 router.push
操作是一樣的,所以我就去找 push
操作所在的源碼位置,最終在 packages/router/src/history/html5.ts
中找到了如下代碼。
可以看到在這個 push
函數中,在第 288 行,執(zhí)行了一次 replace
的操作,而在第 297 行才是真正的 push
操作。我將第 288 行注釋之后,上面的 demo 就跑通了,但是直覺告訴我它這里這么做是有原因的,但是想弄明白估計得將整個庫的源碼看完,沒有這個精力。直接提了個 issue,在它的 github issue 中我發(fā)現(xiàn)了好幾個由于這個第 288 行代碼產生的問題,例如 #1416、#1526、#1529。維護者在我的 issue 中是這么回答的。
結合他在其它 issue 中的回答,大概是如下這么個意思。直接使用 history
api,路由器是不知道的,應該避免使用,最好使用 router.push
來進行更改。還說到第 288 行對于更新當前歷史記錄條目是必要的,以便能夠通過導航守衛(wèi)取消ui 發(fā)起的導航。它允許知道導航的方向和在歷史堆棧中的相對位置。不幸的是,目前還沒有其他方法可以做到這一點。
我補充道,在 vue2
和 react
中沒有這個問題,你不覺得這是個 bug
嗎?他說在 vue2
中使用 hisotry
api 可能會產生你沒有遇到過的問題,vue-router
在 vue3
中比 vue2
擁有更多的功能等等。
解決
沒辦法,維護者不覺得這是個 bug,最后只能妥協(xié)使用 router.push
來解決,并將 vue-router
的依賴添加到 peerDependencies
中。在一些場景下,如果想封裝一個庫在各個框架中共同使用就不行了,在這里必須使用 router.push
才可以,我覺得還是不太好的。
以上就是vue3不能使用history.pushState修改url參數踩坑的詳細內容,更多關于vue3修改url參數踩坑的資料請關注腳本之家其它相關文章!
相關文章
vue3+elementplus基于el-table-v2封裝公用table組件詳細代碼
在日常開發(fā)后端管理系統(tǒng)項目中,用于展示數據多會用表格進行展示,下面這篇文章主要給大家介紹了關于vue3+elementplus基于el-table-v2封裝公用table組件的相關資料,需要的朋友可以參考下2023-12-12vue-cli3環(huán)境變量與分環(huán)境打包的方法示例
這篇文章主要介紹了vue-cli3環(huán)境變量與分環(huán)境打包的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法
這篇文章主要介紹了vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-01-01