案例

========================

方案一：V-if

通过if切换各个组件的显示，适合逻辑简单的

方案二：动态组件

动态组件是使用 component 组件，通过一个特殊的属性 is 来实现

函数注册的组件为：

大型项目中通常和keep-alive以及Vue 结合使用

方案三：Vue Router

可以查看 https://www.yuque.com/yejielin/mypn47/gefgyt

========================

keep-alive 组件缓存

背景

使用

通过keep-alive标签包裹要缓存的组件即可，如上图

keep-alive 的属性

注意！include的内容不要随便加空格

生命周期

可以查看 https://www.yuque.com/yejielin/mypn47/rpxbwu#gAafu

========================

综合使用

Vue 路由 + Keep alive + 动态组件，实现后台管理系统的主页框架

<router-view v-slot="{ Component }">
  <keep-alive :include="keepAlive">
    <component :is="Component" />
  </keep-alive>
</router-view>