nuxt3正确使用keepalive页面缓存组件缓存

最近使用nuxt@3.x版本做SEO优化项目比较多，之前也踩坑过，所以记录一下在 nuxt3 中路由缓存的正确使用方法，本人也之前在GitHub社区中提交过反馈问题，最后是在 3.8.2 版本解决了路由缓存问题。下面讲解如何正确使用keepalive做到页面缓存，组件缓存。

# 环境版本如下
node # 21.4.0
nuxt # 3.12.3
vue # latest  目前最新版本 3.4.*

页面缓存

keepalive 我们知道都是用来缓存组件 在组件卸载的时候 并不去真正意义上的销毁，而是隐藏掉。等再次挂载的时候再把它显示出来。其组件的状态保持原有的状态，并不会初始化。写多了 vue 项目的小伙伴们，大部分通过路由文件( src/router.js )定义 name 值，再去 router-view 组件里包裹 keepalive 组件去判断 路由 里面的 name 值去使用。但是在 nuxt 框架内不需要这么复杂的操作。

• app.vue文件内容

<!-- app.vue -->
<template>
    <div>
        <!-- 最新版vue支持的语法，老版本可能提示错误 -->
        <NuxtPage :keepalive />
    </div>
</template>
<script lang="ts" setup>
    // keepalive 所需的参数 指定name值为index 的页面 进行缓存
    const keepalive = {
        include: ["index"],
    };
</script>

• pages文件夹

pages
├─index.vue # 若组件未定义name值 则为 文件名 index
└─user.vue # name为user

• index.vue文件内容

<template>
    <div>index</div>
    <p>data: {{ data }}</p>
    <p>
        <button @click="data++">+1</button>
        <button @click="data--">-1</button>
    </p>
    <p class="links">
        <NuxtLink to="/user">user Page</NuxtLink>
    </p>
</template>
<script setup lang="ts">
    const data = ref(0);
</script>

项目启动路径为 http://localhost:3000/ 的时候，此时，在组件内操纵 data 的值变化，再去跳转 http://localhost:3000/user 时，再跳回 http://localhost:3000/ ， data 的值不会初始化，而是切换 /user 路由前页面的状态。此时使用 onActivated api来监听组件被激活。

<script lang="ts" setup>
    onActivated(() => {
        console.log("onActivated 页面激活了！");
    });
</script>

• 路径复杂的请使用defineOptions指定组件name值，以免使用路由缓存失败！

例如：pages/userData.vue ，pages/news/detail ，pages/news/[id].vue 。这几个路径过于复杂，在 NuxtPage 组件中难以使用 include 属性值去判断缓存条件，所以需要在页面文件中声明该页面的组件 name 值。

<!-- pages/index.vue -->
<script setup lang="ts">
defineOptions({
  name: "IndexPage", 
}); 
</script>

<!-- pages/news/detail.vue -->
<script setup lang="ts">
defineOptions({
  name: "newsDetail", 
}); 
</script>

<!-- app.vue -->
<template>

    <div>
        <NuxtPage :keepalive />
    </div>

</template>
<script lang="ts" setup>

    const keepalive = {
        include: ["IndexPage","newsDetail"], 
        // 对应 pages/index.vue ,pages/news/detail.vue 中的 name 值 缓存路由
    };

</script>

组件缓存

如果在页面中，使用了v-if指令来控制组件显示，如何保证组件数据不被销毁。当然还是使用keepalive组件。假设我们在components文件中定义组件，会自动全局导入，无需引用。

components
├─Val
│  └─Input.vue # 若组件未定义name值 则为 文件名 Input
├─Counter.vue # 若组件未定义name值 则为 文件名 Counter
└─TextTip.vue # name 为 TextTip

<!-- components/Counter.vue -->
<template>
    <div class="counter">
        <h2>counter</h2>
        <p>data:{{ data }}</p>
        <p>
            <button @click="data++">+1</button>
            <button @click="data--">-1</button>
        </p>
    </div>
</template>

<script lang="ts" setup>
    const data = ref(0);
</script>
<style scoped>
    .counter {
        padding: 20px;
    }
</style>

<!-- components/TextTip.vue -->
<template>
    <div class="text-tip">
        <h2>text-tip</h2>
        <p>text: {{ text }}</p>
        <p>
            <button @click="text += '1'">add Text</button>
        </p>
    </div>
</template>
<script lang="ts" setup>
    const text = ref("text-1");
</script>

<!-- pages/index.vue -->
<template>
    <div>index</div>
    <p>
        <button @click="showCounter = !showCounter">
            {{ !showCounter ? "显示Counter" : "显示TextTip" }}
        </button>
    </p>
    <hr />
    <KeepAlive :include="keep.include">
        <Counter v-if="showCounter" />
        <TextTip v-else />
    </KeepAlive>
</template>
<script setup lang="ts">
    const showCounter = ref(false);
    const keep = {
        include: ["Counter"],
    };
</script>

此时点击 显示Counter 按钮，在 Counter 组件中操作内部数据改变 data:5 ，点击按钮再去切换组件显示隐藏，会发现 Counter 组件并不会销毁掉之前的值 data:5 ，而TextTip组件在操作内部的数据改变后切换 隐藏/显示 后， text 数据是初始化的值 text-1 。

• 注意components文件定义的组件name值

components/Counter.vue ， components/Val/Input.vue 的 name 值nuxt自动会给组件的name值取为文件名 Counter ， Input 。而在组件自动导入的时候却是使用 <Counter /> ， <ValInput /> 。会有点迷惑，所以请在使用 <KeepAlive> 组件包裹来缓存状态，请务必使用 defineOptions 指定组件的name值。

<!-- components/Val/Input.vue -->
<template>
    <div class="input-warpper">
        <h2>Input</h2>
        <input v-model="val" />
    </div>
</template>
<script lang="ts" setup>
    const val = ref("");
    defineOptions({
        name: "ValInput"
    })
</script>
<style>
    .input-warpper {
        margin: 20px;
    }
</style>

或者使用 export default { name:'xxx' } 来指定组件的name值，不使用 setup 语法。

<!-- components/Val/Input.vue -->
<template>
    <div class="input-warpper">
        <h2>Input</h2>
        <input v-model="val" />
    </div>
</template>
<script lang="ts" setup>
    const val = ref("");
</script>
<script lang="ts">
    export default {
        name: "ValInput"
    }
</script>
<style>
    .input-warpper {
        margin: 20px;
    }
</style>

案例地址

点击这里跳转代码案例，来调试 keepalive 页面缓存 和 组件缓存

推荐环境版本： node v21.4.0 , nuxt v3.12.* , 使用 pnpm 安装依赖。