欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3不能使用history.pushState修改url參數踩坑

 更新時間:2023年02月08日 14:08:01   作者:馬格納斯  
這篇文章主要為大家介紹了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-routerreact-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ā)起的導航。它允許知道導航的方向和在歷史堆棧中的相對位置。不幸的是,目前還沒有其他方法可以做到這一點。

我補充道,在 vue2react 中沒有這個問題,你不覺得這是個 bug 嗎?他說在 vue2 中使用 hisotry api 可能會產生你沒有遇到過的問題,vue-routervue3 中比 vue2 擁有更多的功能等等。

解決

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

以上就是vue3不能使用history.pushState修改url參數踩坑的詳細內容,更多關于vue3修改url參數踩坑的資料請關注腳本之家其它相關文章!

相關文章

  • Vue實現(xiàn)五子棋小游戲

    Vue實現(xiàn)五子棋小游戲

    這篇文章主要為大家詳細介紹了Vue實現(xiàn)五子棋小游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • VUE3安裝element?ui失敗的原因以及解決辦法

    VUE3安裝element?ui失敗的原因以及解決辦法

    這篇文章主要給大家介紹了關于VUE3安裝element?ui失敗的原因以及解決的相關資料,很多朋友升級使用Vue3了,但在安裝element?ui失敗出錯了,這里給大家總結下,需要的朋友可以參考下
    2023-09-09
  • vue3+elementplus基于el-table-v2封裝公用table組件詳細代碼

    vue3+elementplus基于el-table-v2封裝公用table組件詳細代碼

    在日常開發(fā)后端管理系統(tǒng)項目中,用于展示數據多會用表格進行展示,下面這篇文章主要給大家介紹了關于vue3+elementplus基于el-table-v2封裝公用table組件的相關資料,需要的朋友可以參考下
    2023-12-12
  • vue-cli3環(huán)境變量與分環(huán)境打包的方法示例

    vue-cli3環(huán)境變量與分環(huán)境打包的方法示例

    這篇文章主要介紹了vue-cli3環(huán)境變量與分環(huán)境打包的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • vue如何實現(xiàn)本項目頁面之間跳轉

    vue如何實現(xiàn)本項目頁面之間跳轉

    這篇文章主要介紹了vue如何實現(xiàn)本項目頁面之間跳轉,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue利用vant組件實現(xiàn)輪播圖效果

    vue利用vant組件實現(xiàn)輪播圖效果

    vant組件適用于移動端項目,目前項目開源,是市面上做的比較好的開源項目,功能比較強大,本文小編就來為大家介紹一下如何利用vant實現(xiàn)輪播圖效果吧
    2023-10-10
  • vue.js框架實現(xiàn)表單排序和分頁效果

    vue.js框架實現(xiàn)表單排序和分頁效果

    這篇文章主要為大家詳細介紹了vue.js框架實現(xiàn)表單排序和分頁效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法

    vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法

    這篇文章主要介紹了vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-01-01
  • 關于移動端與大屏幕自適應適配方案

    關于移動端與大屏幕自適應適配方案

    這篇文章主要介紹了關于移動端與大屏幕自適應適配方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue?electron實現(xiàn)無邊框窗口示例詳解

    vue?electron實現(xiàn)無邊框窗口示例詳解

    這篇文章主要為大家介紹了vue?electron實現(xiàn)無邊框窗口示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09

最新評論