vue-with-keep-alive

快速上手

安装

yarn install vue-with-keep-alive

使用

全局注册

App.vue

<template>
  <keepRouterView
    :matchClearList="matchClearList"
    :matchClearBehindList="matchClearBehindList"
    :max="max"
  />
</template>

<script setup>
const matchClearBehindList = ['Page2']; // 如果是后退，匹配到名称时，会把后面所以的名称剔除掉
const matchClearList = []; // 匹配到会除了当前页面的名称外，清空其他的页面名称
const max = 5 // 页面最大缓存数量 默认是 5
</script>
<script>
// 如果想要缓存该页面，页面必须导出 name，而且这里的 name 需要跟 route 中的 name 相对应
export default { name: "App" };
</script>

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>
  <keepRouterView
    :matchClearList="matchClearList"
    :matchClearBehindList="matchClearBehindList"
    :max="max"
  />
</template>

<script setup>
import { keepRouterView } from "vue-with-keep-alive";
const matchClearBehindList = ['Page2']; // 如果是后退，匹配到名称时，会把后面所以的名称剔除掉
const matchClearList = []; // 匹配到会除了当前页面的名称外，清空其他的页面名称
const max = 5 // 页面最大缓存数量 默认是 5
</script>
<script>
// 如果想要缓存该页面，页面必须导出 name，而且这里的 name 需要跟 route 中的 name 相对应
export default { name: "App" };
</script>

main.js

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

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