vuejs this.$route not work - vue.js

Question

when I send delete request to api it work well,
but next step I want to redirct to index,
so I use this code this.$router.push('/'); but it not working
index.vue
<template>
<div class="container">
<p>{{ message }}</p>
<p><a class="btn btn-primary" href="#/create">create</a></p>
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>edit</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" v-bind="user" v-bind:key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td><a class="btn btn-warning" v-bind:href="'#/edit/'+ user.id">edit</a></td>
<td><a class="btn btn-danger" v-on:click="deleteUser(user)">delete</a></td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="">Previous</a></li>
<li class="page-item"><a class="page-link" href="">1</a></li>
<li class="page-item"><a class="page-link" href="">Next</a></li>
</ul>
</nav>
</div>
</template>
<script>
var users = [
{id:'',name:''},
];
module.exports = {
data () {
return {
message:'',
users: users
}
},
created(){
this.fetchUsers();
},
methods: {
fetchUsers: function() {
axios.get('api/users').then(response => {
this.users = response.data.data;
})
},
deleteUser: function(user) {
axios.delete('api/users/'+user.id).then(response => {
})
this.$router.push('/');
},
}
}
</script>
index.js
var router = new VueRouter({
routes: [
{ path: '/', component: httpVueLoader('js/components/user/index.vue') },
{ path: '/create', component: httpVueLoader('js/components/user/create.vue') },
{ path: '/delete', component: httpVueLoader('js/components/user/delete.vue') },
{ path: '/edit/:id', component: httpVueLoader('js/components/user/edit.vue') },
],
});
new Vue({
el: '#app',
router:router,
template: '<router-view></router-view>',
});
new Vue({
el: '#foot',
components: {
'myfooter' : httpVueLoader('js/components/footer.vue'),
}
});
new Vue({
el: '#head',
components: {
'myheader' : httpVueLoader('js/components/header.vue'),
}
});

Answer 1

From the fact that I do not quite understand why you're creating multiple Vue.js instances, there is a way to accomplish this.
Instead of just creating a Vue instance with: new Vue(), assign it to a global variable: var vm1 = new Vue(). This way, you can access that Vue model via vm1.
// You probably have to assign it to the window object => window.vueApp = vueApp, because of the module bundler
var vueApp = new Vue({
el: '#app',
router:router,
template: '<router-view></router-view>',
});
var vueFoot = new Vue({
el: '#foot',
components: {
'myfooter' : httpVueLoader('js/components/footer.vue'),
}
});
var vueHead = new Vue({
el: '#head',
components: {
'myheader' : httpVueLoader('js/components/header.vue'),
}
});
Inside one of your Vue components:
<script>
export default {
// ...
methods: {
changeRoute() {
vueApp.$router.push(); //
}
},
}
</script>
I didn't tested it, but you get the idea.
You could also import the router and call the push method on that instance. Check out this answer
I would stick with the solution from that answer and create a little helper function. Something like redirect(). Everytime I need to redirect the user to something, this function will take care of that.

Answer 2

deleteUser: function(user) {
axios.delete('api/users/'+user.id).then(response => {
this.$router.push({
path: '/'
});
})
}
You have to use a routeObject like this.
Hopefully thats all. I don't see any other errors.
UPDATE: You are using more than one vue instance. This is as far as I know not good. Header and footer should be components included into your main App. And I do not know your httpVueLoader.