网上有许多办法，终归没有一个能解决我的问题，经过一天多的研究，我终于做出来了，细自己的项目有效，且不需要大的改动，适合已经完成的项目调整改动
路由三层：
第一层路由代码
<router-view></router-view>
第二层路由代码
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component"></component>
</keep-alive>
</router-view>
第三层路由代码
<router-view v-slot="{ Component }">
<keep-alive>
<component
v-if="$route.meta.keepAlive"
:is="Component"
:key="$route.name"
></component>
</keep-alive>
<component
v-if="!$route.meta.keepAlive"
:is="Component"
:key="$route.name"
></component>
</router-view>
</a-layout-content>
路由配置
const Router = createRouter({
history: createWebHashHistory(),
routes: [{
//每一个路由都增加这个属性
meta:{
keepAlive: true //如果需要缓存就是true 不需要缓存就是false
},
}]
})
其他说明
- vue3 + ts + vue-router4
- 亲测有效，不需要每个组件命令
新增问题
- 所有的页面都必须用onActivated ，不能用onMounted ,不然会循环调用许多次
