首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue Router修改query参数url参数没变化

Vue Router修改query参数url参数没有变化问题及解决

2022-09-23 11:07:24 作者：艾路菲尔

这篇文章主要介绍了Vue Router修改query参数url参数没有变化问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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获取不到

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。