How to submit a form in Vue, redirect to a new route and pass the parameters?

 submitClick(){
        this.$router.push({path: '/search', query:{key: value}})
    }

<form @submit.stop.prevent="submitClick">
       <input v-model="keyword">
       <button type="submit">Search</button>
</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>.

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

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