问题描述

我们在项目中执行某些增加、修改和删除的操作，使得当前页面元素的值发生了变化，为了在当前页面中观察到变化后的元素值，我们必须刷新当前页面。

解决方法

以下方法参考自：https://segmentfault.com/a/1190000017007631

原始方法

使用以下代码刷新页面：

1	`location.reload();`

这种方法会使页面出现短暂空白，影响体验。

vue自带的路由跳转

使用以下代码刷新页面：

1	`this.$router.go(0);`

这种方法同样会使页面出现短暂空白，影响体验。

使用provide / inject 组合

原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

首先，在App.vue声明reload方法，并使用v-if控制router-view的显示或隐藏，从而控制页面的再次加载

<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
      })
    }
  }
}
</script>

然后再需要刷新的页面中注入reload方法

export default {
    inject:['reload'],                                 //注入App里的reload方法
    data () {
        return {
     .......
        }
    },

最后，在需要刷新的代码块中，使用以下语句：

1	`this.reload();`