vue[provide/inject] 页面不刷新实现relo

provide/inject：就是在父组件中通过provider来提供变量，然后在子组件中通过inject来 深层次 注入变量。（无论目标组件里父组件有多少间隔）

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provide中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

app.vue

<router-view v-if="isRouterAlive" ></router-view>

export default {
    provide () {
        return {
            reload:this.reload
          }
    },
data(){
    return{
         isRouterAlive : true
    }
}，
methods: {
    reload(){
        this.isRouterAlive =false;
        this.$nextTick(()=>{
            this.isRouterAlive =true;
        });
  },
}
}

child.vue

export default {
    inject:['reload'],
}

现在可直接调用this.reload();了

还可以使用watch监控$route变化实现调用reload刷新作用

 watch:{
      '$route':"reload"
    }

数据更新时

isRouterAlive 从 true => false => this.$nextTick true
实现页面重载

方法二

用this.$options.data()重置组件内data值

resetData () { // 更新时调用
    Object.assign(this.$data, this.$options.data.call(this));
}