Keep-Alive 是什么

keep-alive是vue中的内置组件，是缓存不活动的组件，而不是销毁(所以缓存组件没有销毁期)

<keepAlive>是vue中的内置组件，是缓存不活动的组件，而不是销毁(所以缓存组件没有销毁期)

用法

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
当组件在 keep-alive 内被切换时，它的 mounted 和 unmounted 生命周期钩子不会被调用，
取而代之的是activated和deactivated

包含/排除

`<KeepAlive>` 默认会缓存内部的所有组件实例，但我们可以通过 `include` 和 `exclude` prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：

最大缓存实例数

我们可以通过传入 max prop 来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

Keep-Alive代码

<template>

   <div id="nav">

        <router-link to="/">Home</router-link> 

        <router-link to="/about">About</router-link>

    </div>

   vue3.0配置 Component是固定写法

  <router-view v-slot="{ Component }">

    <keep-alive>

      <component :is="Component"  `v-if`="$route.meta.keepAlive"/>

    </keep-alive>

    <component :is="Component"`  v-if="!$route.meta.keepAlive"/>

  </router-view>

</template>

route.js中配置

path:"/",
name:"Home",
component:Home,
meta:{
    keepAlive:true
}

效果