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

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

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

You can try below approach

First

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>

Then

Create

1. vue model object foobar

2. vue method 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);
      }
    }
  }

只需添加：@ submit.prevent =“ false”

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

      </div>   
 </form>

我希望这对你有用:)