vue 实现 reload 功能

1. App.vue ( 主组件) 配置代码

1. 声明一个变量
  data () {
    return {
      isRouterAlive: true
    }
  },
2. 定义一个方法
  methods: {
    reload () {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      })
    }
}
3. provide 选项允许我们指定我们想要提供给后代组件的数据/方法
export default {
  name: 'App',
  provide () {
    return {
      reload: this.reload
    }
  }
}

4. 最后一步, 在 router-view 上加入 isRouterAlive
<template>
  <div id="app" @click="clicked">
    <router-view v-if="isRouterAlive" ref="route"/>
  </div>
</template>

2. 子组件 Custom.vue (需要reload 的子组件), 配置代码

  export default {
    inject: ['reload']
}

  methods: {
        refresh: function () {
              // 业务代码, bala ...

              this.reload();
            
         }
    }
}