README

vue-with-keep-alive

介绍

vue-with-keep-alive可以帮助你实现前进刷新，返回时之前的页面还处于激活的状态，可以像app一样的体验。哪里需要缓存，把router-view组件使用keep-router-view来替换。

language

安装

yarn install vue-with-keep-alive

快速上手

在线Dome: https://byepasthub.github.io/vue-with-keep-alive/

使用

vue2.x版本安装npm install vue-with-keep-alive@2.x

vue3.x版本安装npm install vue-with-keep-alive

注意： route中的name必须跟组件导出的name值对应(必须要写)，否则不会缓存改组件，例如：

const routes = [
  { path: '/home', name: 'Home', component: Home }
]

<script>
export default {
  name: 'Home' // 必须跟上面的 name 对应上
}
</script>

组件属性

mode	模式：全部缓存(默认)`allKeepAlive`，自定义缓存`customizeKeepAlive`
max	页面最大缓存数量
exclude	字符串或正则表达式。任何名称匹配的组件都不会被缓存。
matchClearList	匹配到会除了当前页面的名称外，清空其他的页面名称。
matchClearBehindList	如果是后退，匹配到名称时，会把后面所以的名称剔除掉。

router 对象

push/replace/forward: 缓存跳转页面组件

replace: 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录

reLaunch: 跳转时清除所有缓存组件，然后缓存重新缓存该页面组件

其他(包括系统返回)的都属于后退，路由发生变化会销毁页面组件

全局注册组件

KeepRouteView

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import withKeepAlive from 'vue-with-keep-alive'

const app = createApp(App)
app.use(router)
app.use(withKeepAlive, router)
app.mount("#app");

App.vue

<template>
  <keep-router-view mode="allKeepAlive" />
</template>

Usage no npm install needed!