场景:keep-alive缓存部分页面成功,但是总有几个页面无法缓存;
解决方法:
1.router中的noCache设置为true。
meta : {
noCache: true // 如果设置为true,则不会被 <keep-alive> 缓存(默认 false)
title: 'title' // 设置该路由在侧边栏和面包屑中展示的名字
icon: 'svg-name' // 设置该路由的图标,对应路径src/assets/icons/svg
breadcrumb: false // 如果设置为false,则不会在breadcrumb面包屑中显示
activeMenu: '/system/user' // 当路由设置了该属性,则会高亮相对应的侧边栏。
}
2.keep-alive中的插槽的 :key改变的时候将router-view重新渲染了,去掉即可。
<router-view v-slot="{ Component, route }" :key="route.path">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<component :is="Component" :key="route.path" />
</keep-alive>
</transition>
</router-view>```
3.template只能存在一个根标签,当存在两个根标签的情况不缓存(当注释和根标签同时存在并且是兄弟时,也不缓存)
<template>
<!-- 测试 -->
<div></div>
</template>