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

Posted 2023-02-22

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

【英文标题】：How to submit a form in Vue, redirect to a new route and pass the parameters?

【发布时间】：2018-09-10 23:05:05

【问题描述】：

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

【参考方案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);
      
    
  

【讨论】：

你应该更喜欢使用<form @submit.stop.prevent="submit">，因为它也可以通过在任何字段中按回车来捕获提交。

没错，在<form> 上使用@submit。另外，.stop 在这里也没用，因为 html 中无论如何都不允许嵌套表单。

如何在表单中做post方法？现在它在 url 中可见

哇！我查找了文件，但无法将这些文件拼凑在一起。感谢您提供很好的示例和很好的解释。

【参考方案2】：

只需添加以下内容： @submit.prevent="假"

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

      </div>   
 </form>

我希望这对你有用:)

【参考方案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，提交前可以有任何逻辑