如何清除Nuxt 3中KeepAlive缓存的NuxtPage实例？

在Nuxt 3项目中，通过在app.vue给<NuxtPage>添加keepalive属性实现页面缓存：

<NuxtLayout>
  <NuxtPage ref="page" keepalive />
</NuxtLayout>

同时在layout.vue中实现了类Chrome标签页的v-tabs组件，每个标签对应不同路由，通过插槽渲染对应页面：

<v-window>
  <v-app-bar>
    <v-app-bar-nav-icon></v-app-bar-nav-icon>

    <v-card flat>
      <v-tabs v-model="menuStore.$state.currentTabIndex">
        <v-tab v-for="(tab, ti) in tabs" v-bind:key="ti" @click="changeCurrentTab(tab)" :to="tab.to">
          {{ tab.title }}
          <button v-if="!tab.isStatic" @click="menuStore.closeWindow(tab)">
            <v-icon>mdi-close</v-icon>
          </button>
        </v-tab>
      </v-tabs>
    </v-card>
  </v-app-bar>

  <v-card elevation="2">
    <v-card-text>
      <slot /> <!-- Slot that nuxt injects page components into -->
    </v-card-text>
  </v-card>
</v-window>

当前遇到的问题：关闭标签页（从store维护的标签列表移除对应项）时，无法清除该标签对应页面的keep-alive缓存；尝试获取<NuxtPage>实例调用unmount()也无法成功访问实例，需要找到强制移除路由缓存的有效方法。

方法1：动态控制keep-alive的exclude属性 #

Nuxt 3的<NuxtPage keepalive>封装了Vue的<keep-alive>，可以通过keepalive-props传递exclude参数，动态排除需要销毁的页面组件：

1. 修改app.vue中的<NuxtPage>，绑定keepalive-props：

<template>
  <NuxtLayout>
    <NuxtPage 
      ref="page" 
      keepalive 
      :keepalive-props="{ exclude: excludedComponentNames }" 
    />
  </NuxtLayout>
</template>

<script setup>
import { useMenuStore } from '~/stores/menu'
const menuStore = useMenuStore()

// 计算需要排除缓存的组件名列表
const excludedComponentNames = computed(() => {
  return menuStore.closedTabs.map(tab => tab.componentName)
})
</script>

2. 在每个页面组件中定义唯一的name属性：

// 示例：pages/user.vue
<script setup>
defineOptions({
  name: 'UserPage'
})
</script>

3. 在store的closeWindow方法中，将关闭标签对应的组件名加入排除列表：

// stores/menu.js
export const useMenuStore = defineStore('menu', {
  state: () => ({
    tabs: [],
    closedTabs: []
  }),
  actions: {
    closeWindow(tab) {
      // 移除目标标签
      this.tabs = this.tabs.filter(item => item.to !== tab.to)
      // 将对应页面组件名加入排除缓存列表
      this.closedTabs.push(tab.componentName)
    }
  }
})

方法2：直接操作keep-alive的缓存实例 #

通过useNuxtApp获取Vue应用实例，手动删除keep-alive缓存容器中的目标路由缓存：

// stores/menu.js
import { useNuxtApp } from '#app'

export const useMenuStore = defineStore('menu', {
  actions: {
    closeWindow(tab) {
      this.tabs = this.tabs.filter(item => item.to !== tab.to)
      
      const nuxtApp = useNuxtApp()
      // 定位到keep-alive组件实例
      const keepAliveComp = nuxtApp.vueApp._instance?.vnode?.children?.find(v => v.type.name === 'KeepAlive')?.component
      if (keepAliveComp) {
        // 路由缓存key通常为路由name或路径，根据实际情况调整
        const cacheKey = tab.routeName || tab.to
        // 删除对应缓存
        delete keepAliveComp._cache[cacheKey]
      }
    }
  }
})

方法3：通过路由meta控制缓存状态 #

利用页面的definePageMeta定义缓存标识，结合路由跳转触发缓存更新：

1. 在页面组件中设置路由元信息：

// 示例：pages/user.vue
<script setup>
definePageMeta({
  keepAlive: true,
  key: 'user-page'
})
</script>

2. 在store的closeWindow方法中，通过修改路由meta并触发跳转清除缓存：

// stores/menu.js
import { useRouter } from 'vue-router'

export const useMenuStore = defineStore('menu', {
  actions: {
    async closeWindow(tab) {
      this.tabs = this.tabs.filter(item => item.to !== tab.to)
      const router = useRouter()
      
      // 解析目标路由，修改其meta禁用缓存
      const targetRoute = router.resolve(tab.to)
      targetRoute.meta.keepAlive = false
      
      // 先跳转到目标路由触发缓存失效，再跳回当前激活标签
      await router.replace(tab.to)
      const activeTab = this.tabs[0]
      if (activeTab) {
        await router.replace(activeTab.to)
      }
    }
  }
})

内容的提问来源于stack exchange，提问作者paroxit