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

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

 }

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

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

Answer 2

由于我不太明白您为什么要创建多个 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 方法。查看

我会坚持使用该答案中的解决方案并创建一个小辅助函数。类似于 redirect()。每次我需要将用户重定向到某个地方时，此函数都会处理。

vuejs this.$route 不工作

vuejs this.$route not work

vue.js

vue-router