vue中不刷新页面实现所有组件重新加载

在有些情况下需要重新加载页面或者触发组件的生命周期，这个时候刷新页面很简单就能实现，但是这样用户体验不好.这个时候我们可以通过provide/inject可以轻松实现跨级访问祖先组件的数据，使用v-if让App.vue重新加载。

1、在根组件app.vue中给router-view加上v-if,然后定义触发v-if的方法，用provide 传递给下级组件。

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

<script>
  export default {
    name: 'App',
    provide () {
      return {
        reload: this.reload  //把方法传递给下级组件
      }
    },
    data() {
      return {
        isRouterShow: true //定义一个变量控制v-if
      }
    },
    methods: {
      async reload () {  //触发显示隐藏
        this.isRouterShow = false
        await this.$nextTick()
        this.isRouterShow = true
      },
    }
</script>

2、在需要用到刷新组件的页面用inject接收，再调用。

export default {
  inject: ['reload'], //接收App.vue传递的方法
  methods: {
    reloadHandle () {
      this.reload()  //直接调用
    }
  }
}

另外provide/inject还可以传递对象数据，方便跟组件传值