vue删除/更新数据后，刷新当前页面重新加载数据

写删除接口时发现直接使用this.$router.go(0)刷新用户体验极差，网上参考了这篇文章中的配置，记下来备用。

优点：可复用，简单易上手

 

1.修改app.vue文件：

<template>

  <div id="app">

    <router-view v-if="isRouterAlive"/>

  </div>

</template>

<script> 

export default {

  name:'app',

  provide(){

    return{

      reload:this.reload

    }

  },

  data(){

    return{

      isRouterAlive:true

    }

  },

  methods:{

    reload(){

      this.isRouterAlive = false

      this.$nextTick(function(){

        this.isRouterAlive=true

      })

    }

  }

2.在单独的表单下引用，

export default {

  inject: ['reload'], 

  data() {

    .......

},

methods: {

函数(){

接口调用等...

this.reload()

}

}

例如：

原网址https://www.jb51.net/article/151984.htm