How do I navigate once I submit a form and receive a status of 200 - vue.js

Question

I am confused about how to navigate away from a form route in view to another route, once my data has been submitted successfully.
I found this example.
Which seems like it should work, but it's a bit unclear on the Vue router side, can I instantiate a new Vue router in any component if I have a routes component already. Anyway, it seems to get the status but it doesn't push the route.
My Method:
methods: {
handleSubmit(event) {
const router = new VueRouter();
axios.post(API_ENDPOINT,
this.itemInit,
{ headers: {
'Content-type' : 'application/json',
}
}).then(response => {
this.results = response.data.results;
if(response.status == 200) {
router.push('/');
}
}).catch(error => {console.log(error)});
}
}
I am expecting to have it navigate to the root route when I get a status 200 from the server, which I am and everything works fine, just not getting this navigation.
Update: This worked for me.
methods: {
handleSubmit(event) {
const router = new VueRouter();
axios.post(API_ENDPOINT,
this.itemInit,
{ headers: {
'Content-type' : 'application/json',
}
}).then(response => {
this.results = response.data.results;
if(response.status == 200) {
this.$router.push('/');
}
}).catch(error => {console.log(error)});
}
}

Answer 1

Assuming you are building a single page app in your entry point (usually main.js)
You would do something similar to the following:
import Vue from 'vue'
import { router } from '#/plugins/vue-router' // This is where you declare your routes
and when you initiate your app you will have something like:
new Vue({
el: '#app',
router,
template: '<App/>'
})
Now in your component you would need to update your code to:
methods: {
handleSubmit(event) {
axios.post(API_ENDPOINT,
this.itemInit,
{
headers: {
'Content-type' : 'application/json',
}
}).then(response => {
this.results = response.data.results;
if(response.status == 200) {
this.$router.push('/');
}
}).catch(error => {console.log(error)});
}
}