在Vue路由器推送中使用表单模型答案

【问题标题】：use form model in vue router push在Vue路由器推送中使用表单模型
【发布时间】：2021-01-19 16:14:11
【问题描述】：

我正在编写一个组件来过滤网格中的数据。该组件有多个字段，我将它们的数据存储在模型中。当用户填写一些输入并提交表单时，我正在提交时这样做。

methods: {
    async submit() {
      await this.$router.push(
        {
          name: this.$route.name,
          query: JSON.parse(JSON.stringify(this.model))
        }
      )
    }
  }

我希望这会在 URL 查询中推送表单数据，但它不会做任何事情并且我收到此错误。

Avoided redundant navigation to current location

看起来我无法将动态值传递给查询。如果我在控制台中记录模型并将确切的数据粘贴到查询代码中，它就可以正常工作！！有没有办法解决这个问题？

【问题讨论】：

你为什么要切换到你已经在同一条路线上？
我正在尝试将查询推送到路线
我明白了，但这有什么用？你用那个查询做什么？你真的应该用更多关于你想要达到的目标的信息来扩展你的问题......
@MichalLevý 有一个组件负责为不同的网格生成过滤表单，因此它具有动态字段。我在模型中有该表格的数据。我必须在查询中推送数据，以便网格刷新并显示过滤后的数据。

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

尝试使用 catch 块..

this.$router.push(
        {
          name: this.$route.name,
          query: JSON.parse(JSON.stringify(this.model))
        }).catch(()=>{});

这样，它只允许您避免错误显示，因为浏览器认为异常已被处理。

【讨论】：

但这并不能解决问题。我需要将查询实际推送到路由。
是的，我猜你不能这样传递对象
检查这些链接router.vuejs.org/guide/essentials/navigation.html
stackoverflow.com/questions/40382388/…

【解决方案2】：

我修好了。我不知道如何，但我曾经将表单同步到this.$route.query。因此，当我填写表格时，查询正在更新。显然，当我尝试推送查询时，Vue 路由器认为查询是多余的并引发了该错误。

【讨论】：

@AdamOrlov 我实际上并不知道我是怎么做到的，但我将this.$route.query 作为参数传递给了名为resourceParams 的组件。在我的组件的数据中，我有这样一行 model: this.resourceParams 我只是将其更改为 model: { ...this.resourceParams } 并解决了问题。