vue3+js+vite学习之页面动态缓存

一、目的

1、实现部分页面缓存

2、实现标签页关闭之后清除页面缓存

二、实现方法

     使用keep-alive进行路由缓存，配合include参数实现动态缓存

1、首选在路由列表中进行是否需要缓存配置

      在需要进行缓存的页面中，meta参数中增加keepAlive配置项，需要缓存的配置成true，不需要缓存的配置成false或者不设置都行

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: 'list',
      name: 'list',
      meta: {
        title: '列表',
        keepAlive: true
      },
      component: () => import('@/views/list.vue')
    },
  ]
})

2、将缓存的页面name数组存储在pinia中，根据打开的标签页列表动态变化

export const useTagsNavInfoStore = defineStore('tagsNavInfo', () => {
  // 缓存的页面列表
  const cacheList = ref([])
  // 打开的标签页列表
  const openTags = ref([])
  // 监听tags变化
  watch(
    openTags.value,
    () => {
      cacheList.value = openTags.value
        .filter((item) => item.meta && item.meta.keepAlive)
        .map((item) => {
          return item.name
        })
    },
    { immediate: true }
  )
  return {
    cacheList,
    openTags
  }
})

3、在router-view中使用keep-alive，include是缓存的页面name数组，读取pinia中的值

<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive :include="tagsNavInfoStore.cacheList">
      <component :is="Component" :key="route.fullPath" />
    </keep-alive>
  </router-view>
</template>
<script setup>
import { useTagsNavInfoStore } from './tagsNavInfoStore'
const tagsNavInfoStore = useTagsNavInfoStore()
</script>

三、重点注意事项

1、include中的name指的是组件的name值，组件的默认name值是文件的名字，需要将vue升级到3.3.8版本以上，才能给组件设置name值，给组件设置name值的代码如下：

<script setup>
defineOptions({
  name: 'list'
})
</script>

2、使用router-view时，如果遇到多层嵌套的问题，只需要在最里层的router-view中加上keep-alive缓存即可。否则打开新页面时页面会进行根据router-view嵌套的keep-alive层级进行多次加载，后台接口会调取多次，影响系统性能