vue项目手动刷新组件

  实在不想使用window.reload()，或者router.go(0)刷新整个页面，尝试过N种办法最终发现只有provide-inject 组合这种刷新组件最靠谱，功能实现了赶紧记录下来：

provide / inject 组合：

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

app.vue中：

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide(){
    return {
      reload:this.reload
    }
  },
  data(){
    return {
      isRouterAlive:true
    }
  },
  methods:{
    reload(){
      this.isRouterAlive=false;
      this.$nextTick(()=>{
        this.isRouterAlive=true;
      })
    }
  }
}
</script>

需要刷新组件：

export default {
  inject:['reload'],
  methods: {
   reset() {
    this.reload()
  },    
}

provide / inject 用法

provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

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

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

官方文档：https://cn.vuejs.org/v2/api/#provide-inject

参考文章：https://www.cnblogs.com/yinn/p/9056731.html