VUE刷新当前页面，重载页面数据

VUE刷新当前页面，重载页面数据

在开发Vue项目过程中，执行CRUD完操作的时候，我们需要刷新一下页面，重载数据。但发现使用最简单的页面刷新方法location.reload()或this.$router.go(0)均会导致页面刷新过程中出现空白现象的发生，体验不佳；在vue中，可以用到一个 provide / inject 这对用例，通过控制router-view 的显示与隐藏，来重渲染路由区域，重而达到页面刷新的效果。

1.首先在我们的根组件APP.vue里面,写入刷新方法，路由初始状态是显示的。

<template>
  <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
  </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
       })
    }
  },
  components:{
  }
}
</script>

2.然后在子组件里面进行引用

export default {