vue 刷新当前页面、组件；provide、inject

provide、inject

最外层组件（祖先组件）向其所有子组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效；通过在App.vue，声明reload方法，控制router-view的显示或隐藏，去控制页面刷新。

App.vue

<template>
  <div id="app">
    <router-view class="container" v-if="isAlive" />
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      isAlive: true
    };
  },
  provide() {
    return {
      reload: this.reload
    };
  },
  components: {},
  created() {},
  methods: {
    reload() {
      this.isAlive = false;
      this.$nextTick(() => {
        this.isAlive = true;
      });
    }
  }
};
</script>

子组件注入reload方法
inject: [“reload”]
在逻辑完成后，直接this.reload()，即可刷新当前页面；

<template>
  <div class="discovery-wrap">     
  </div>
</template>

<script>

export default {
  inject: ["reload"],
  name: "Discovery",
  components: {},
  created() {
    this.$nextTick(() => {
      let _self = this;
      let token = this.token ;
      if (typeof token == "undefined") {
        setTimeout(function() {
          _self.reload();
        }, 2000);
      }
    });
  },
  data() {
    return {
      token: ""
    };
  },
  computed: {},
  methods: {},
  mounted() {}
};
</script>