Destroy

If you need to destroy the cached page components, you can use destroy to destroy

• The destroy property and method parameters are Route.name String | Array, the only special value: ALL destroy all
• Provide the $keepRouter global object in the Vue instance

Destroy inside Vue instance

<router-link :to="{name: 'Home', destroy: 'About'}">
  Jump to the Home page and destroy the About page
</router-link>

<button @click="$router.replace({name: 'Home', destroy: 'About'})">
  Jump to the Home page and destroy the About page
<button>

<button @click="$router.push({name: 'Home', destroy: ['Page1', 'Page2']})">
  Jump to the Home page and destroy the Page1 and Page2 pages
<button>

<button @click="$router.push({name: 'Home', destroy: 'ALL'})">
  Jump to the Home page and destroy all cached pages
<button>

<button @click="$router.reLaunch({name: 'Home'})">
  Jump to the Home page and destroy all cached pages
<button>

<button
  @click="() => {
    $router.push({name: 'Home'});
    $keepRouter.destroy('About');
  }"
>Jump to the Home page and destroy the About page<button>

Destroyed outside the Vue instance

import { destroy } from 'vue-with-keep-alive';

destroy(['Page1', 'Page2']);