如何在Vue中提交表单，重定向到新路由并传递参数？ [英] How to submit a form in Vue, redirect to a new route and pass the parameters?

问题描述

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

I am using Nuxt and Vue and I am trying to submit a form, redirect the user to a new route including the submitted params, send an API request to get some data and then render that data.

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

I achieved this by simply setting the form action to the new path and manually adding all the URL parameters to the API request.

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

First I create a simple form with the route /search.

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

提交表单时，用户离开当前页面并被重定向到新页面。该网址现在如下所示： http://www.example.com/search?foobar=test 。现在我使用 this。$ route.query.foobar 获取 foobar 参数并将其发送到我的API。

When submitting the form the user leaves the current page and gets redirected to the new page. The URL would now look like this: http://www.example.com/search?foobar=test. Now I fetch the foobar parameter by using this.$route.query.foobar and send it to my API.

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

However the problem in my approach is when submitting the form the user leaves the current page and a new page load will occur. This is not what we want when building progressive web apps.

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

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

推荐答案

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

The default behavior of <form> is to reload the page onsubmit. When implementing SPA's it would be better to avoid invoking default behavior of <form>.

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

Making use of router module which is available out-of-box in nuxtjs will enable all the redirection controls to flow within the application. if we try to trigger events available via <form> then browser reload will occur. This has to be avoided.

所以我的问题是如何在Nuxt / Vue中提交表格并重定向到
a new路线包括提交的参数？

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（）;

Use .stop.prevent modifiers to prevent the submit button from invoking default <form> behavior. This is similar to using event.stopPropagation(); and event.preventDefault(); in jQuery

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

然后

创建

1. vue模型对象 foobar

vue方法提交

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

Use this.$router.push to redirect to next page. This will enable the control flow to stay inside the SPA. if you want to send any data into server then you can do it before invoking this.$router.push else you can redirect and continue your logic.

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

这篇关于如何在Vue中提交表单，重定向到新路由并传递参数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！