VueWithKeepAlive

Get started quickly

Register to use

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>

Component properties

mode (String)Mode: all caches (default) allKeepAlive, custom cache component customizeKeepAlive needs to be set in the route settings meta: { keepAlive: true }
max (Number)Maximum number of pages to cache (default: 5)
exclude (Array | String)String or regular expression. Any component whose name matches will not be cached
matchClearList (Array)When a name is matched, except the name of the current page, clear other page names
matchClearBehindList (Array)If it is backward, when a name is matched, all subsequent names will be removed

router Object

  • push/replace/forward: Cache jump page component

  • replace: Similar to push, the only difference is that it does not add new records to history

  • reLaunch: Clear all cached components when jumping, and then cache the page component again

  • Others (including system return) are all backwards, and the page component will be destroyed when the route changes.

  • In the above router object, add the destroy property (String|Array) to customize the page component that has been destroyed by the cache.

TIP

reLaunch: Jump is the same as replace, it will not add new records to history, if you need to use other jump methods, you can use the above methods, such as

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

About destroy