出现问题：
keep-alive缓存无效,原因是与vue2写法不同,vue3应该使用插槽的形式,让keep-alive包裹插槽, 使用keep-alive还会出现一个问题,就是多路由使用同一个组件,最终几个路由打开的页面渲染的参数是一致的.也就是说在打开新的路由时,并不会重新挂载该组件,而是对组件进行了复用. 此时就要用到route-view的key属性,改属性作为组件的唯一标识,如果同组件不同key,则会重新初始化挂载一个新的组件. 这里要注意的是如果router-view使用的是插槽模式,key要绑定在component标签内,如果绑在router-view内,每次返回组件都会被重新挂载,导致缓存失效.
写法：
<router-view v-slot="{ Component }" ><br> <transition mode="out-in" :name="theme.showPageTransition ? 'fade-transform' : 'no-transform'"><br> <!-- include 缓存白名单 --><br> <keep-alive :include="keepAliveNameList" :max="keepAliveMaxNum"><br> <component :is="Component" :key="routerKey" ref="componentRef" /><br> </keep-alive><br> </transition><br> </router-view>
