VueWithKeepAlive

快速上手

注册使用

main.js

import Vue from 'vue';
import withKeepAlive from 'vue-with-keep-alive'
import App from './App.vue';
import router from './router';

Vue.use(withKeepAlive, router)

new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app');

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

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

App.vue

<template>
  <keep-router-view />
</template>

组件属性

mode (String)模式：全部缓存(default) allKeepAlive，自定义缓存组件 customizeKeepAlive 需要在route设置中上meta: { keepAlive: true }
max (Number)页面最大缓存数量 (default: 5)
exclude (Array | String)字符串或正则表达式。任何名称匹配的组件都不会被缓存
matchClearList (Array)匹配到名称时，除了当前页面的名称外，清空其他的页面名称
matchClearBehindList (Array)如果是后退，匹配到名称时，会把后面所有的名称剔除掉

router 对象

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

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

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

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

  • 上面 router 对象中，添加destroy属性(String|Array)，用做自定义销毁缓存过的页面组件。

提示

reLaunch: 跳转跟replace一样，它不会向 history 添加新记录，如果需要用其他跳转方式可以使用上面这几种方式，比如

this.$router.push({name: 'Home', destroy: 'ALL'})

关于 destroy