vue-router：更新查询时 this.$router.push 不起作用答案

【问题标题】：vue-router: this.$router.push not working when updating queryvue-router：更新查询时 this.$router.push 不起作用
【发布时间】：2019-03-29 03:18:53
【问题描述】：

我想更新对 url 的查询。但是， $router.push 不会更新 url。 disp 是每次调用的不同值。为什么？

handle: function(disp) {
    let route = Object.assign({}, this.$route);
    route.query.disp = disp;
    this.$router.push(route);
},

版本。

"vue": "^2.5.17",
"vue-router": "^3.0.1",

路由（console.log）

【问题讨论】：

你能在push()之前做一个路由的console.log来检查对象的值吗
我用路由添加了console.log的图片。
不确定，总的来说一切似乎都是正确的，您是否尝试过直接使用对象进行导航？ this.$router.push({ name: 'component name'}) 确保路由器配置正确
我看到console.log(this.$route.query.disp);。 $route.query.disp 已更新。但是 url 没有更新。

标签： javascript vue.js vue-router

【解决方案1】：

您不应该尝试推送到路由对象。相反，您应该使用以下之一：

// literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: 123 }})

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

在你的情况下：

this.$router.push({path: this.$route.path, query: {disp: disp}})

【讨论】：

我试过this.$router.push({ name: 'name', params: { page: this.$route.params.page }, query: { disp: [dispLines,] } });。但是，url 没有更新。但是， this.$route 是由推送参数更新的。为什么 url 没有更新？
我试过this.$router.push({ path: '/posts', query: { disp: [dispLines,] } });。那是行不通的。
它对我也不起作用...当我推送相同的路径时，url 没有更新，当我推送另一条路径时它运行良好..但我想留在同一条路径上, 只需要更新参数:/ "vue": "2.6.10", "vue-router": "3.0.6"
我发现了我的问题......这个答案很好用我已经在这里测试过codesandbox.io/s/vue-template-9o3u5。我的问题是我在每次路由更改时在路由之间复制查询参数，这就是原因。