如何在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 中提交表单并重定向到包含提交参数的新路由？

Answer 1

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

的默认行为

利用 nuxtjs 中 out-of-box 可用的 router module 将使所有重定向控件能够在应用程序内流动。如果我们尝试通过 <form> 触发可用的事件，那么浏览器将重新加载。必须避免这种情况。

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

你可以试试下面的方法

第一

使用 .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>

然后

创建

vue模型对象foobar
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);
    }
  }
}

Answer 2

只需添加： @submit.prevent="false"

<form @submit.prevent="false">
      <div class="form-group">

      </div>   
 </form>

希望对你有用:)

Answer 3

 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，提交前可以有任何逻辑

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

How to submit a form in Vue, redirect to a new route and pass the parameters?

javascript

node.js

vue.js

nuxt.js