Vue Router keepAlive元数据失效：页面无法保持存活状态求助

你遇到的核心问题是仅在路由配置中添加keepAlive元数据是不够的，必须将<router-view>包裹在<keep-alive>组件中，才能让路由组件实现缓存。以下是具体的解决步骤：

1. 修改路由视图的包裹方式 #

在你的NaviComponent.vue中，将原有的<router-view>替换为结合<keep-alive>的结构，根据路由元信息判断是否缓存组件：

<!-- NaviComponent.vue template -->
<NSpace vertical>
    <!-- <NSwitch v-model:value="collapsed" /> -->
    <NLayout has-sider position="absolute">
        <NLayoutSider
            collapse-mode="width"
            :collapsed-width="64"
            :width="160"
            :collapsed="collapsed"
            :native-scrollbar="false"
            show-trigger
            @collapse="collapsed=true"
            @expand="collapsed=false"
        >
            <NMenu 
                v-model:value="activeKey"
                :collapsed="collapsed"
                :collapsed-width="64"
                :collapsed-icon-size="22"
                :options="menuOptions"
            />
        </NLayoutSider>
        <NLayout embedded :native-scrollbar="false">
            <div id="router-view">
                <!-- 缓存需要保持存活的组件 -->
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive" />
                </keep-alive>
                <!-- 不缓存其他组件 -->
                <router-view v-if="!$route.meta.keepAlive" />
            </div>
        </NLayout>
    </NLayout>
</NSpace>

2. 给缓存组件设置名称（Vue 3 Script Setup 必备） #

在Vue 3的<script setup>语法中，组件名称不会自动推断，需要手动通过defineOptions设置，确保keep-alive能正确识别缓存目标：

// PricingView.vue script setup
defineOptions({
  name: 'PricingView'
})

const init = async () => {
  console.log('initializing pricing view')
  // do some stuff
}
init()

3. 验证效果 #

完成上述修改后：

• 首次访问/pricing时，init函数会执行一次，控制台输出日志
• 切换到其他页面再返回/pricing时，组件会从缓存中恢复，init不会再次执行，页面状态保持不变

额外说明 #

如果需要在缓存组件每次被激活时执行特定逻辑（而非仅初始化一次），可以使用Vue的onActivated钩子：

import { onActivated } from 'vue'

onActivated(() => {
  // 每次进入缓存组件时执行
})

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