vue 页面刷新

provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名，value 是：

  在可用的注入内容中搜索用的 key (字符串或 Symbol)，或一个对象，该对象的：

1. from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
2. default 属性是降级情况下使用的 value (官网照搬)

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

provide示例代码：

<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>

inject示例代码：

<template>
  <div id="child">
  </div>
</template>

<script>
export default {
  name: "child",
  inject: ["reload"],
  data() {
    return {}
  },
  methods: {
    clearParams() {
      this.reload();
    }
  }
};
</script>

其他几种Vue页面刷新方式：

1. window.location.reload();
2. this.$router.go(0)

以上两种方法刷新时，整个浏览器进行了重新加载，闪烁，体验不好。

ps: 用vue-router重新路由到当前页面，页面是不进行刷新的

参考文章：

 Vue官网API  vue项目如何刷新当前页面