iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue Router修改query参数url参数没有变化问题及解决
  • 822
分享到

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

2024-04-02 19:04:59 822人浏览 安东尼
摘要

目录Router修改query参数url参数没有变化问题正常情况下就可以修改了VueRouter不切换url只修改query报错解决方案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获取不到

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

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

本文链接: https://www.lsjlt.com/news/168273.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作