vue页面刷新及依赖的注入

在做项目的时候 会让页面重新刷新 通常采用的方法有window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，用户体验不好 所以要用到  provide / inject 组合来解决用户体验及页面刷新 同时 也可以解决组件间多次调用问题

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

父组件：

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

子组件的调用：

<script>
export default {
   inject:['reload'] ,
   methods:{
       reload(){
        this.reload()
       }
   }
}
</script>

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

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