最近，开发了基于VUE3的后端管理系统。整个项目结构是指VUE-Element-Plus-Admin（称为Admin）。在处理页面缓存方面，它使用了静止绑定路由器 - 视图。系统的方向。由于管理员路由器是一个平坦的结构，缓存故障没有问题。我的系统的路由器是涉及的树结构多层路由器视图嵌套了，因此管理员中的简单实现无法满足我的需求。
如何解决多层路由缓存失败的问题？这是本文的重点。如果您与我有相同的麻烦，您可能希望阅读本文吗？
小小的简化系统由以下部分组成：
项目中的路线如下，具有经典树结构。根节点是基本布局，所有页面均基于此布局。在辅助路线上，路由器视图组件用于携带子路线。我们对于nestouterview.vue等功能组件，共同称为“中间件”。
实际上，它是否是多层路线，它根本不影响项目或业务，而是接口显示需求，以便用户可以更快地找到功能页面。在这种情况下，显示的路由保留多个水平。实际上，路由器维护被维护到第一级，并且显示菜单和业务路由器休假。启动原始树结构并保持路由器平坦，我们得到以下路线，没有复杂的雀巢，也不构造它额外的“中间件”组件。
有人说我的项目中有数十种或数百种路由配置，让我手动弄平它。不要在这一天工作。好！因为“中间件”仅携带子撤离功能，因此我们可以在平坦的过程中考虑它。
最终效果如下，除了主页和主题3页缓存。
完成代码
计划的实施是直接清晰的，但是有很多局限性。特别是“ nestouterview.vue）文件，如果它具有业务功能，它就无法如此简单和粗鲁地解决。第二个计划。
方案2的实现对3个功能非常有力：
获取具有“中间件”组件名称作为查询条件的所有页面。
由于Router.js中配置的组件是箭头函数，因此我们无法直接获得“中间件”组件名称，因此组件名称是通过函数内容获得的。
component.tostring（）
通过观察，我们发现被提取的组件的名称是在双引号之间的评论区域。
该功能包含在路由数组中，以及需要缓存的数组。
该函数首先定义一个可存储“中间件”的变量，然后滤除包含子集（带有“中间部分”）或不需要缓存的所有子集，并将包含子集的值的值存储在中间。最后，返回值由过滤路由和“中间件”组成。
以“ nestouterview.vue”为例，目前，它不仅是一个容器，而且是载体。首先，当我们查看文件时，嵌套的层数比原始的层数更多，而且情况是更复杂;然后，要获取使用Nestouterview作为父组件的所有路由，并最终获得了需要在此组件中缓存的数组。
路由器
nestouterview.vue
最终效果如下，除了主页和主题3页缓存外，但是有一个奇怪的地方，也就是说，两个[返回]功能出现在主题2-1页上。这是因为嵌套了，您可以通过设置道具来实现页面统一。
完成代码
计划1是目前互联网上最常见的解决方案，我个人认为仍然存在很大的局限性。第二个解决方案是小小野在项目开发过程中探索的解决方案，可以扩大强度。有一个更好的解决方案，您可以在我中分享它。
如果您对使用Keep-Alive有疑问，请姐妹的文章“查看项目中的维护如何在项目中失败”
读过姐妹的朋友可能还记得编辑说，vue-router的名称属性用于路由跳跃，而不是为了保持alive，但是在本文的方法中使用了vue-router的方法，用于名称。vue-router incomnessencEthis的含义是因为小小的统一统一了组件和vue-router的名称，这更有利于维护项目。
本文是第一个发掘平台，是个人博客的来源
原始：https：//juejin.cn/post/7099355285172518920