Question

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

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

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

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

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

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

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

Answer 1

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

利用nuxtjs中现成的router module将使所有重定向控件在应用程序中流动。如果我们尝试通过<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>

然后

创建

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中提交表单，重定向到新路由并传递参数？

3 个答案: