vuejs this.$route 不起作用

Question

当我向 api 发送删除请求时，它运行良好， 但下一步我想重定向到索引， 所以我使用此代码this.$router.push('/'); 但它不起作用

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

从我不太明白你为什么要创建多个 Vue.js 实例这一事实来看，有一种方法可以做到这一点。

不只是创建一个 Vue 实例：new Vue()，而是将它分配给一个全局变量：var vm1 = new Vue()。这样，您就可以通过 vm1 访问该 Vue 模型。

// 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'),
    }
});

在您的一个 Vue 组件中：

<script>
export default {
    // ...
    methods: {
        changeRoute() {
            vueApp.$router.push(); // 
        }
    },
}
</script>

我没有测试它，但你明白了。

您还可以导入路由器并在该实例上调用 push 方法。查看this answer

我会坚持使用该答案中的解决方案并创建一个小辅助函数。像redirect() 这样的东西。每次我需要将用户重定向到某个东西时，这个函数都会处理这个问题。

Answer 2

 deleteUser: function(user) {
     axios.delete('api/users/'+user.id).then(response => {
         this.$router.push({
             path: '/'
         });
     })

 }

你必须像这样使用 routeObject。 希望就是这样。我没有看到任何其他错误。

更新：您正在使用多个 vue 实例。据我所知这是不好的。页眉和页脚应该是包含在您的主应用程序中的组件。而且我不知道你的 httpVueLoader。