javascript - 如何在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。

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

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

Answer 1

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

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

So my question is how can I submit a form in Nuxt/Vue and redirect toa new route including the submitted parameters?

你可以试试下面的方法

第一

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

<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);
    }
  }
}