详解vue-template-admin三级路由无法缓存的解决方案

1. 为什么三级会缓存不了 在src/layout/AppMain组件: keep-alive的组件依赖cachedViews,cachedViews是store中的一个状态，cachedViews的逻辑在src/layout/TagView 当路由变更时就会调用addViewTags,addViewTag会根据匹配的路由name属性进行缓存。而用到三级路由的时候，拿到name只能时第三级路由的name，二级路由组件的名字会丢失，keep-alive就不会进行缓存。 知道原因之后，第一个想法就是把二级路由的name也加上去就好了。要实现这个也很简单，只需要获取到matched属性 Vue.js 是一款流行的前端框架，用于构建用户界面。在开发基于Vue的管理模板，如vue-template-admin时，可能会遇到一个问题，即三级路由的组件无法被正确缓存。这个问题主要涉及Vue Router的`keep-alive`特性，以及如何处理组件的缓存策略。 `keep-alive` 是Vue Router提供的一种组件缓存机制，它允许我们保留组件的状态，即使组件在视图中被切换出去。通常，`keep-alive`会依据组件的`name`属性来决定是否缓存。在vue-template-admin中，缓存逻辑可能存储在Vuex的`cachedViews`状态中，通过`TagView`组件的`addViewTags`方法进行管理。当路由改变时，`addViewTags`会根据匹配的路由`name`属性添加或删除缓存的组件。 在处理三级路由时，问题在于仅能获取到第三级路由的`name`，而二级路由的`name`无法被正确记录。这导致二级路由的组件不会被`keep-alive`缓存，因此在切换回该路由时，组件状态无法恢复。解决这个问题的一种思路是确保在缓存逻辑中同时包含二级和三级路由的`name`。 实现这一目标的方法是访问路由的`matched`属性。`matched`包含了当前路由的所有匹配路径，包括所有嵌套的子路由。我们可以遍历`matched`，将所有需要缓存的路由组件的`name`添加到`cachedViews`数组中，从而确保二级路由组件也能被正确缓存。 然而，这种方法可能引发另一个问题：当关闭某个三级路由的组件时，我们需要决定是否删除对应的二级路由。如果删除，可能会导致其他依赖于该二级路由的组件缓存失效；如果不删除，可能在重新打开同一二级路由下的其他组件时，复用原本的组件，而不是重新创建。这种情况下，需要权衡是否保留二级路由的缓存，以及如何处理依赖关系。 另一种可能的解决方案是重新设计路由结构，将原本的三级路由“降维”为二级路由。如果三级路由之间没有共享数据，可以将它们合并为一个二级路由组件，然后在组件内部动态渲染不同的子内容。这样，尽管在逻辑上它们仍然是三级路由，但在实际路由配置中，它们会被处理为二级路由，从而简化缓存管理。 在上述代码示例中，`delteFakeParent`函数的作用是遍历并修改路由对象，将带有`noCompoent: true`标记的路由替换为其子路由。这样做可以将原本的三级路由结构转换为二级路由结构，使得缓存策略更容易管理和实现。 解决vue-template-admin三级路由无法缓存的问题需要理解`keep-alive`的工作原理，以及如何通过路由的`matched`属性来控制缓存。同时，如果路由结构允许，适当调整路由设计也可以简化缓存管理，提高应用性能。