Vue Router修改query参数后URL参数为何不变？

本文共计346个文字，预计阅读时间需要2分钟。

目录 + Router修改query参数url参数没有变化问题 + 正常情况下 + 就可以修改了 + vueRouter不切换url只修改query + 报错 + 解决方案 + Router修改query参数url参数没有变化问题 + 正常情况下 + this.$router.push({query: “})

目录

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。