# sluggard-keep-alive-vue

> vue3 keepAlive 傻瓜式解决方案, 提供约定式路由支持 / 动态页面缓存控制 / 多层级滚动缓存等功能

Latest version **1.2.0** (published 2024-09-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install sluggard-keep-alive-vue
pnpm add sluggard-keep-alive-vue
yarn add sluggard-keep-alive-vue
bun add sluggard-keep-alive-vue
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2024-09-03 |
| First published | 2023-11-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 11.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wrhan |
| Maintainers | wrhan |
| Keywords | keepAlive, vue, sluggard, unplugin-vue-router, router, vue-router, scroll |

## Links

- npm: https://www.npmjs.com/package/sluggard-keep-alive-vue
- npm.io page: https://npm.io/package/sluggard-keep-alive-vue

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [vue-router](https://npm.io/package/vue-router.md) ^4.2.5

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.2.0 (latest) — 2024-09-03
- 1.1.4 — 2024-05-15
- 1.1.3 — 2024-01-23
- 1.1.2 — 2023-12-28
- 1.1.1 — 2023-12-28
- 1.1.0 — 2023-12-26
- 1.0.9 — 2023-12-26
- 1.0.8 — 2023-12-07
- 1.0.7 — 2023-12-05
- 1.0.6 — 2023-11-28
- 1.0.5 — 2023-11-28
- 1.0.4 — 2023-11-28
- 1.0.3 — 2023-11-27
- 1.0.2 — 2023-11-27
- 1.0.1 — 2023-11-24

## README

# sluggard-keep-alive-vue

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

## 文档地址 👇

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

## 快速配置

> 修改 App.vue 👇

```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. 👇

- 常规路由

```typescript
...

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' 页面跳转到当前页时, 当前页具有缓存
        },
      },
    },
    ...
  ]
});

...
```

- 约定式路由

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

## API

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

---
_Source: https://npm.io/package/sluggard-keep-alive-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._