vue-router4结合keep-alive实现页面缓存

1. 官方推荐写法

<router-view v-slot="{ Component, route }">
    <keep-alive>
          <component
            :is="Component"
            :key="route.meta.usePathKey ? route.path : undefined"
          />
    </keep-alive>
</router-view>

这种是最基本的写法，但是这样会实现全部页面组件的缓存，我们该如何实现部分页面缓存呢？

2. keep-alive用法

通过查看keep-alive组件相关的文档，可以通过include和exclude属性实现指定页面的缓存

这里的include和exclude中的值是需要组件的 name值
这里的name值是需要组件文件具名导出的，

当然如果采用<script setup>的写法，会自动生成组件的name，但这样并不直观，推荐还是通过具名导出的方式

// 可以跟setup写法同时存在
<script>
export default {
  name: 'CERTI_CHECK_LIST'
};
</script>
<script setup>
</script>

3. 与router-view结合

可以通过如下写法

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="includeList">
      <component :is="Component" :key="$route.fullPath" />
    </keep-alive>
  </router-view>
</template>

<script setup>
import { reactive, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const includeList = reactive([]);
watch(route, (to) => {
  if (to.meta.keepAlive && includeList.indexOf(to.name) === -1) {
    includeList.push(to.name);
  }
});
</script>

//  route.js
 {
        path: 'list',
        name: 'CERTI_CHECK_LIST', // 保持一致
        component: () => import('@/views/certi-check/list/index.vue'),
        meta: {
          keepAlive: true
        }
  },

// @/views/certi-check/list/index.vue
<script>
export default {
  name: 'CERTI_CHECK_LIST' // 保持一致
};
</script>

这里需要注意 一点，组件的name 和 路由的name 需要设置成一样，才能通过include缓存对应的组件