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自定义指令实现checkbox全选功能的方法
下面小编就为大家分享一篇Vue自定义指令实现checkbox全选功能的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
VUE 使用中踩过的坑
本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-02-02
vue element后台鉴权流程分析
这篇文章主要介绍了vue element后台鉴权流程分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
Vue.js与 ASP.NET Core 服务端渲染功能整合
本文通过案例给大家详细分析了ASP.NET Core 与 Vue.js 服务端渲染,需要的朋友可以参考下
2017-11-11
Vue3 openlayers加载瓦片地图并手动标记坐标点功能
这篇文章主要介绍了 Vue3 openlayers加载瓦片地图并手动标记坐标点功能,我们这里用vue/cli创建,我用的node版本是18.12.1,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
2024-04-04
Vue之绑定class样式与style样式方式
这篇文章主要介绍了Vue之绑定class样式与style样式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-09-09
vue-element-admin中node-sass换成dart-sass,安装依赖报code 128多种问题的解决
这篇文章主要介绍了vue-element-admin中node-sass换成dart-sass,安装依赖报code 128多种问题的解决方法,本文给大家分享问题原因分析及解决方法，需要的朋友可以参考下
2023-02-02
在vue中如何封装G2图表
这篇文章主要介绍了在vue中如何封装G2图表，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue-cli3.0使用及部分配置详解
这篇文章主要介绍了vue-cli3.0使用及部分配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
用v-html解决Vue.js渲染中html标签不被解析的问题
这篇文章主要给大家介绍了如何利用v-html解决Vue.js渲染过程中html标签不能被解析，html标签显示为字符串的问题，文中通过图文介绍的很详细，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-12-12