需用到的点：Vue中的keepAlive内置组件+vue-router中的配置问题
一、内置组件----keepAlive
Vue2官方文档：https://v2.cn.vuejs.org/v2/api/#keep-alive
Vue3官方文档：https://cn.vuejs.org/guide/built-ins/keep-alive.html
- 作用：当多个组件（页面）之间进行切换时可对组件（页面）中的内容进行缓存，其内部存在缓存机制
- 用法：
- Vue2用法：
<!-- App.vue中 -->
<router-view v-else-if="isRouterAlive" v-slot="{ Component }">
<keep-alive :include="['App']">
<component :is="Component" />
</keep-alive>
</router-view>
- Vue3用法：
<!-- App.vue中 -->
<template>
<div id="app">
<keep-alive >
<router-view></router-view>
</keep-alive>
</div>
</template>
内部缓存机制
组件默认是不存在缓存机制的，只要切换到下一个组件就会销毁当前的组件，此时可通过改内置组件将当前的组件进行销毁，内部缓存机制：
- 缓存所有界面
<!-- App.vue中 -->
<template>
<div id="app">
<keep-alive >
<router-view></router-view>
</keep-alive>
</div>
</template>
- 缓存部分页面
- 使用$route.meta属性
<!-- App.vue中 -->
<te