Vue Router修改query参数url参数没有变化问题及解决
目录
Router修改query参数url参数没有变化问题
正常情况下
就可以修改了
vueRouter不切换url只修改query报错
解决方案
Router修改query参数url参数没有变化问题 正常情况下this.$router.push({
query:{}
})
this.$router.replace({
query:{}
})
就可以修改了
但是当已有query对象里面修改其中一个值，就会发现虽然this.$route.query发生改变但是浏览器的url上的参数并没有发生变化， 尝试将已有的参数进行深拷贝突然发现就可以了
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获取不到
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
相关文章
Claire
2021-05-21
Rabia
2023-07-20
Brigitte
2023-07-20
Abbie
2023-07-20
Yvonne
2023-07-20
Rasine
2023-07-20
Tina
2023-07-20
Kande
2023-07-20
Flower
2023-07-20
Heather
2023-07-20
Tertia
2023-07-20
Fredrica
2023-07-20
Bree
2023-07-20
Katherine
2023-07-20
Genet
2023-07-20
Orianna
2023-07-20
Ora
2023-07-20