如何在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.现在我foobar通过使用获取参数this.$route.query.foobar并将其发送到我的API.

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

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

Answer 1

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

利用router modulenuxtjs中的开箱即用可以使所有重定向控件在应用程序中流动.如果我们尝试触发可用的事件,<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);
      }
    }
  }