Vue keepAlive页面强制刷新

需求

现在有一个需求，要求不刷新浏览器，但要刷新路由中的组件

方案

• 将需要keepAlive的页面name加入到keep-live的include中。
• Vue的transition组件，有一个after-enter钩子事件，待子组件插入完毕调用，正好适合这个场景，在这个钩子中，将当前组件添加到keep-live的include中。
• 在刷新时，从keepAliveArr中移除当前组件的name，然后利用v-if删除router-view组件，在nextTick事件后将router-view添加回来，实现组件的刷新

代码

template

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

script

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)
      }
    }
  }
}