Vue Router修改query参数url参数没有变化问题及解决
更新时间：2022年09月23日 11:10:39 作者：艾路菲尔
这篇文章主要介绍了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获取不到
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中使用geobuf的示例详细，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了Vue 关闭当前页、关闭当前标签tagsView,主要有两种方式，一种是在vue页面直接实现，另一种在js文件中写自定义函数，在vue页面中调用，本文通过实例代码介绍的非常详细，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue中使用vant的Toast轻提示报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue环境如何实现div focus blur焦点事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
对于Element组件的使用,最主要的就是明确自己想要达到的效果,从官网中将对应代码复制粘贴即可,最重要的是要读懂不同组件官网中提供的文档,以便实现自己想要的效果,本文给大家介绍Vue组件库Element-常见组件表格,感兴趣的朋友一起看看吧2023-10-10
我们在做后台管理系统里面有非常多的表单需求,下面这篇文章主要给大家介绍了关于Vue如何获取表单数据的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
本文主要介绍了Vue将将后端返回的list数据转化为树结构的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了Vue如何根据id在数组中取出数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了快速修改antd vue单个组件的默认样式方式，具有很好的参考价值，希望对大家有所帮助。2022-08-08
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-10-10
最新评论