javascript - 在Vue路由器推送中使用表单模型

Question

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

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

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

标签： javascriptvue.jsvuejs2vue-router

Answer 1

尝试使用 catch 块..

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

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