vue3 多个页面使用keepAlive

1. 个人习惯在router中先定义。

{
    path: '/policyPage',
    name: 'policyPage',
    meta:{
      keepAlive:true,
    },
    component: () => import("@/view/page/policyPage.vue"),
  },

2. 个人喜欢在app.vue中使用。

<router-view v-slot="{ Component }">
        <component
            :is="Component"
            :key="$route.name"
            v-if="!$route.meta.keepAlive"
        ></component>
        <keep-alive :max="1">
            <component
                :is="Component"
                :key="$route.name"
                v-if="$route.meta.keepAlive"
            ></component>
        </keep-alive>
    </router-view>

3、注意：多个页面使用keepAlive需要标明key，否则会报错。单个页面使用则不需要。max表示最大缓存几个页面，根据项目需要。