Sometimes, we want to submit a form, redirect to a new route and pass the parameters in Vue.js.
In this article, we’ll look at how to submit a form, redirect to a new route and pass the parameters in Vue.js.
How to submit a form, redirect to a new route and pass the parameters in Vue.js?
To submit a form, redirect to a new route and pass the parameters in Vue.js, we can call this.$router.push in the submit event handler.
For instance, we write
<template>
<div id="app">
<form>
<input type="text" name="foobar" v-model="foobar" />
<button type="submit" @click.stop.prevent="submit()">Submit</button>
</form>
</div>
</template>
<script>
//...
export default {
//...
data() {
return {
foobar: null,
};
},
methods: {
submit() {
const { foobar } = this;
this.$router.push({ path: "/search", query: { foobar } });
},
},
//...
};
</script>
to add a form with a submit button.
We call submit when we submit the form.
In it, we call this.$router.push with an object with the route path and the query string parameters in the query property.
We add the prevent to the @click directive to stop the default server side form submission behavior.
Conclusion
To submit a form, redirect to a new route and pass the parameters in Vue.js, we can call this.$router.push in the submit event handler.
