Vue?Router修改query參數(shù)url參數(shù)沒有變化問題及解決
更新時(shí)間：2022年09月23日 11:10:39 作者：艾路菲爾
這篇文章主要介紹了Vue?Router修改query參數(shù)url參數(shù)沒有變化問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Router修改query參數(shù)url參數(shù)沒有變化問題
正常情況下
this.$router.push({
query:{}
})
this.$router.replace({
query:{}
})就可以修改了
但是當(dāng)已有query對(duì)象里面修改其中一個(gè)值，就會(huì)發(fā)現(xiàn)雖然this.$route.query發(fā)生改變但是瀏覽器的url上的參數(shù)并沒有發(fā)生變化， 嘗試將已有的參數(shù)進(jìn)行深拷貝突然發(fā)現(xiàn)就可以了
let newQuery= JSON.parse(JSON.stringify(this.$route.query));
newQuery.index = 2;
this.$router.replace({
query: newQuery
})vueRouter不切換url只修改query報(bào)錯(cuò)
使用push的話 會(huì)導(dǎo)致返回歷史有記錄
this.$router.push({
? query: {
? ? id: this.processId
? }
})所以需要使用
this.$router.replace({
? query: {
? ? id: this.processId
? }
})雖然不影響使用,但是會(huì)報(bào)如下錯(cuò)誤
解決方案
在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可能會(huì)報(bào)錯(cuò).catch獲取不到
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue自定義指令實(shí)現(xiàn)checkbox全選功能的方法
下面小編就為大家分享一篇Vue自定義指令實(shí)現(xiàn)checkbox全選功能的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本篇是我對(duì)vue使用過程中以及對(duì)一些社區(qū)朋友提問我的問題中做的一些總結(jié)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
vue element后臺(tái)鑒權(quán)流程分析
這篇文章主要介紹了vue element后臺(tái)鑒權(quán)流程分析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
Vue.js與 ASP.NET Core 服務(wù)端渲染功能整合
本文通過案例給大家詳細(xì)分析了ASP.NET Core 與 Vue.js 服務(wù)端渲染,需要的朋友可以參考下2017-11-11
Vue3 openlayers加載瓦片地圖并手動(dòng)標(biāo)記坐標(biāo)點(diǎn)功能
這篇文章主要介紹了 Vue3 openlayers加載瓦片地圖并手動(dòng)標(biāo)記坐標(biāo)點(diǎn)功能,我們這里用vue/cli創(chuàng)建,我用的node版本是18.12.1,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了Vue之綁定class樣式與style樣式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue-element-admin中node-sass換成dart-sass,安裝依賴報(bào)code?128多種問題的解決
這篇文章主要介紹了vue-element-admin中node-sass換成dart-sass,安裝依賴報(bào)code?128多種問題的解決方法,本文給大家分享問題原因分析及解決方法，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了在vue中如何封裝G2圖表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue-cli3.0使用及部分配置詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
用v-html解決Vue.js渲染中html標(biāo)簽不被解析的問題
這篇文章主要給大家介紹了如何利用v-html解決Vue.js渲染過程中html標(biāo)簽不能被解析，html標(biāo)簽顯示為字符串的問題，文中通過圖文介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12