解决给Vue Router 添加动态Query无法响应问题

最新推荐文章于 2024-07-05 15:16:31 发布

一只小笨笨

最新推荐文章于 2024-07-05 15:16:31 发布

阅读量1.2k

点赞数

分类专栏：前端学习文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Zuoriqiufeng/article/details/120982176

版权

1 篇文章 0 订阅

订阅专栏

"本文介绍了在Vue应用中遇到VueRouter动态添加Query参数时，URL未更新的问题及解决方案。错误做法是直接修改`this.$route.query`，正确做法是创建一个新的对象来添加Query参数，例如使用扩展运算符`{...this.$route.query}

摘要由CSDN通过智能技术生成

错误代码如下:

// 往url中添加参数
addUrlQuery(key, value) {
    let newQuery = this.$route.query
    newQuery[key] = value
    this.$router.push({query: newQuery})
}

一般往url栏里边添加参数，当参数为多个时，为了方便，会直接获取到当前url栏里边原有的query参数，然后在其中添加新的参数即可。
但此时往往会出现，添加参数但是url里边的参数没有任何变化。
所以需要重新创建一个对象来添加:

addUrlQuery(key, value) {
    let newQuery = {...this.$route.query}
    newQuery[key] = value
    this.$router.push({query: newQuery})
}

当往url添加的query对象是一个新的对象时，即可成功

关注

专栏目录