Vue?Router修改query參數(shù)url參數(shù)沒有變化問題及解決
更新時間：2022年09月23日 11:10:39 作者：艾路菲爾
這篇文章主要介紹了Vue?Router修改query參數(shù)url參數(shù)沒有變化問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Router修改query參數(shù)url參數(shù)沒有變化問題
正常情況下
this.$router.push({
query:{}
})
this.$router.replace({
query:{}
})就可以修改了
但是當已有query對象里面修改其中一個值，就會發(fā)現(xiàn)雖然this.$route.query發(fā)生改變但是瀏覽器的url上的參數(shù)并沒有發(fā)生變化， 嘗試將已有的參數(shù)進行深拷貝突然發(fā)現(xiàn)就可以了
let newQuery= JSON.parse(JSON.stringify(this.$route.query));
newQuery.index = 2;
this.$router.replace({
query: newQuery
})vueRouter不切換url只修改query報錯
使用push的話 會導致返回歷史有記錄
this.$router.push({
? query: {
? ? id: this.processId
? }
})所以需要使用
this.$router.replace({
? query: {
? ? id: this.processId
? }
})雖然不影響使用,但是會報如下錯誤
解決方案
在router.js加上這段
import VueRouter from 'vue-router'
const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location) {
return originalReplace.call(this, location).catch(err => err)
}
// push的同理
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}注 適用于3.0.0版本的vue-router, 3.4.x可能會報錯.catch獲取不到
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue中使用geobuf的示例詳細，本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04
Vue 關閉當前頁、關閉當前標簽tagsView的實現(xiàn)方法
這篇文章主要介紹了Vue 關閉當前頁、關閉當前標簽tagsView,主要有兩種方式，一種是在vue頁面直接實現(xiàn)，另一種在js文件中寫自定義函數(shù)，在vue頁面中調(diào)用，本文通過實例代碼介紹的非常詳細，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue中使用vant的Toast輕提示報錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue環(huán)境如何實現(xiàn)div?focus?blur焦點事件
這篇文章主要介紹了vue環(huán)境如何實現(xiàn)div?focus?blur焦點事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
對于Element組件的使用,最主要的就是明確自己想要達到的效果,從官網(wǎng)中將對應代碼復制粘貼即可,最重要的是要讀懂不同組件官網(wǎng)中提供的文檔,以便實現(xiàn)自己想要的效果,本文給大家介紹Vue組件庫Element-常見組件表格,感興趣的朋友一起看看吧2023-10-10
我們在做后臺管理系統(tǒng)里面有非常多的表單需求,下面這篇文章主要給大家介紹了關于Vue如何獲取表單數(shù)據(jù)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
Vue將將后端返回的list數(shù)據(jù)轉化為樹結構的實現(xiàn)
本文主要介紹了Vue將將后端返回的list數(shù)據(jù)轉化為樹結構的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
Vue如何根據(jù)id在數(shù)組中取出數(shù)據(jù)
這篇文章主要介紹了Vue如何根據(jù)id在數(shù)組中取出數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了快速修改antd?vue單個組件的默認樣式方式，具有很好的參考價值，希望對大家有所幫助。2022-08-08
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-10-10