Vue keepAlive页面强制刷新方式

<transition @after-enter="afterRouterChange">
  <keep-alive :include="keepAliveArr">
    <router-view v-if="refreshControl" ref="child"/>
  </keep-alive>
</transition>
<button @click="refreshChild"></button>

export default {
  name: 'index',
  data () {
    return {
      keepAliveArr: [],
      refreshControl: true
    }
  },
  methods: {
    refreshChild () {
      // 先移除，再加载，强制刷新子页面
      const name = this.$refs.child.$options.name
      this.keepAliveArr.splice(this.keepAliveArr.indexOf(name), 1)
      this.refreshControl = false
      this.$nextTick(() => this.refreshControl = true)
    },
    afterRouterChange () {
      // 记录子组件name，用于keepalive
      const childName = this.$refs.child.$options.name
      this.pageTabList[this.pageTabIndex].name = childName
      if (!this.keepAliveArr.includes(childName)) {
        this.keepAliveArr.push(childName)
      }
    }
  }
}

import Vue from 'vue';
import Vuex from 'vuex';
let storeModules = {};
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        keepAlive: []
    },
    getters: {},
    mutations: {
        change_keepalive: (state, keepAlive) => {
            state.keepAlive = keepAlive;
        }
    },
    actions: {},
    modules: storeModules
});

<template>
    <div>
        <keep-alive :include="$store.state.keepAlive">
            <router-view></router-view>
        </keep-alive>
    </div>
</template>
<script>
export default {};
</script>

methods: {
     // 跳转
     goLink(){
         this.$store.commit('change_keepalive', ['页面1','页面2','页面3']) 
         this.$router.push({
             path:'/页面2',
         })
     }
 },
 beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$store.commit('change_keepalive', ['页面1'])
    })
  }

beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.path.indexOf('页面3') > -1) {
          vm.$store.commit('change_keepalive', ['页面1','页面2'])
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    if (to.path.indexOf('页面3') > -1) {
      this.$store.commit('change_keepalive', ['页面1','页面2', '页面3'])
    } else if (to.path.indexOf('页面1')>-1) {
      this.$store.commit('change_keepalive', ['页面1'])　
    }
    next()
  }

beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.path.indexOf('页面4') > -1) {
          vm.$store.commit('change_keepalive', ['页面1','页面2', '页面3'])
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    if (to.path.indexOf('页面4') > -1) {
      this.$store.commit('change_keepalive', ['页面1','页面2', '页面3'])
    } else if (to.path.indexOf('页面2') > -1) {
      this.$store.commit('change_keepalive', ['页面1','页面2'])　
    }
    next()
  }

<script>
    export default {
        name:'index',//组件name
        components: {},
        props: {},
        data() {
            return {};
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {},
        methods: {}
    }
</script>```