vue 如何刷新界面

业务场景：

vue项目中遇到对当前页面进行数据操作时需要实时更新数据，页面需要刷新；
在jquery里面可以使用location.reload()方法，刷新页面；
在vue中，使用this.$router.go(0)也能实现刷新，但是会出现短暂空白，用户体验效果不好，
所以可以尝试使用provide / inject 这对用例

这对选项需要一起使用，以允许一个根组件向其所有子组件注入一个依赖，实现原理就是通过控制router-view 的显示与隐藏，来重渲染路由区域，重而达到页面刷新的效果，show -> false -> show

实现如下：

• 1.根组件APP.vue代码如下,写入刷新方法，路由初始状态是显示的

<template>
  <div id="app">
        <router-view v-if="active"></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  provide (){
     return {
       reload:this.reload
     }
  },
  data(){
    return {
       active:true
    }
  },
  methods:{
    reload (){
       this.active = false
       this.$nextTick(function(){
          this.active = true
       })
    }
  },
  components:{
          header
  }
}
</script>

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

export default {
      name: "accredit",
      inject:"[reload]",
      data() {
          msg:"hello"
      }
}

• 3.在执行完相应的操作后，调用reload方法即可

	this.reload()