如何在Vue中提交表单，重定向到新路由并传递参数？

Question

我正在使用 Nuxt 和 Vue，我正在尝试提交表单，将用户重定向到包含提交参数的新路由，发送 API 请求以获取一些数据，然后呈现该数据。

我通过简单地将表单操作设置为新路径并手动将所有 URL 参数添加到 API 请求来实现这一点。

首先，我使用 /search 路线创建一个简单的表单。

 <form action="/search">
  <input type="text" name="foobar">
  <button type="submit">Submit</button>
</form>

提交表单时，用户离开当前页面并被重定向到新页面。 URL 现在看起来像这样： http://www.example.com/search?foobar=test 。现在我使用 this.$route.query.foobar 获取 foobar 参数并将其发送到我的 API。

然而，我的方法中的问题是当提交表单时用户离开当前页面并且会发生新的页面加载。这不是我们在构建渐进式 Web 应用程序时想要的。

所以我的问题是如何在 Nuxt/Vue 中提交表单并重定向到包含提交参数的新路由？

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<form> 的默认行为是重新加载页面 onsubmit 。在实现 SPA 时，最好避免调用 <form> 的默认行为。

使用 router module 在 nuxtjs 中开箱即用，将使所有重定向控件在应用程序中流动。如果我们尝试通过 <form> 触发可用的事件，则会发生浏览器重新加载。这必须避免。

所以我的问题是如何在 Nuxt/Vue 中提交表单并重定向到包含提交参数的新路由？

您可以尝试以下方法

第一的

使用 .stop.prevent 修饰符来防止提交按钮调用默认的 <form> 行为。这类似于在 jQuery 中使用 event.stopPropagation(); 和 event.preventDefault();

 <form>
  <input type="text" name="foobar" v-model="foobar">
  <button type="submit" @click.stop.prevent="submit()">Submit</button>
</form>

然后

创造

1. vue模型对象 foobar

2. vue方法 submit

使用 this.$router.push 重定向到下一页。这将使控制流留在 SPA 内。如果您想将任何数据发送到服务器，那么您可以在调用 this.$router.push 之前执行此操作，否则您可以重定向并继续您的逻辑。

 export default {
  data(){
    return {
      foobar : null
    }
  },
  methods: {
    submit(){
      //if you want to send any data into server before redirection then you can do it here
      this.$router.push("/search?"+this.foobar);
    }
  }
}

原文由 divine 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

  submitClick(){
        this.$router.push({path: '/search', query:{key: value}})
    }

 <form @submit.stop.prevent="submitClick">
       <input v-model="keyword">
       <button type="submit">Search</button>
</form>

这是通过表单提交实现 SPA 的正确方法。支持回车键和submitClick，提交前可以有任何逻辑

原文由 Divyanshu Pandey 发布，翻译遵循 CC BY-SA 4.0 许可协议