sluggard-keep-alive-vue

✨ 请确保项目已安装 vue-router 依赖

文档地址 👇

https://www.wem3.cn/sluggard/sluggard-keep-alive-vue/

快速配置

修改 App.vue 👇

<template>
  <RouterView v-slot="routerViewSlot">
    <KeepAlive :include="keepAliveInclude">
      <component :is="setComponentName(routerViewSlot)" />
    </KeepAlive>
  </RouterView>
</template>

<script lang="ts" setup>
import { keepAliveInit } from 'sluggard-keep-alive-vue'

const { keepAliveInclude, setComponentName } = keepAliveInit()
</script>

使用方法

为页面 routes.meta 添加 keepAlive 参数即可 e.g. 👇

• 常规路由

...

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    ...
    {
      path: '/',
      component: Home,
      meta: {
        title: 'home',
        keepAlive: true // 页面开启缓存
      },
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: 'about',
        keepAlive: {
          incl: ['/abc'], // 仅当从 '/abc' 页面跳转到当前页时, 当前页具有缓存
        },
      },
    },
    ...
  ]
});

...

• 约定式路由

<script lang="ts" setup>
definePage({
  meta: {
    title: 'home',
    keepAlive: {
      incl: ['/abc'], // 仅当从 '/abc' 页面跳转到当前页时, 当前页具有缓存
    },
  },
})
</script>

API

| 方法 | 参数 | 释义 | | ------------------------------------------------------- | -------- | ----------------------------------------------------- | | keepAliveInit() | / | 初始化 <配合 RouterView / KeepAlive 组件使用> | | getAllKeepAlive() | / | 获取当前所有已缓存的页面 | | addKeepAlive(routePath?: string) | 页面路径 | 为指定页面添加缓存 <无参数则为当前页> | | deleteKeepAlive(routePath?: string) | 页面路径 | 删除指定页面缓存 <无参数则为当前页> | | resetKeepAlive() | / | 重置所有页面缓存至初始状态 | | isKeepAlive(routePath?: string) | 页面路径 | 判断指定页面是否有缓存 <无参数则为当前页> | | RPush(to: string, E: Element \| EventTarget \| Event) | | 详见文档 |