keep-alive不能缓存多层级路由菜单问题解决

这出现的原因是多级路由导致的，就是router-view嵌套 在层级不同的router-view中切换tag会出现缓存数据失效的问题。目前keep-alive可以有效缓存一级，二级的路由菜单，3级以上菜单并不能做到缓存，这里提供一个解决方案： 在cachedViews中手动加上一级菜单和三级菜单之间，缺失的二级菜单的名字，这样二级菜单下的组件就会缓存了 实列代码如下： const _import = require('@/router/_import_prodection');//获取组件的方法 import {tree} from '@/utils/treeDate' import 在Vue.js应用中，`keep-alive` 是一个特殊的组件，用于缓存组件的状态，使得在切换路由后，之前的状态能够被保留下来，提高用户体验。然而，在多层级路由菜单的场景下，`keep-alive` 可能无法正常工作，尤其是在三层及以上的路由菜单结构中。这个问题通常出现在`router-view`的嵌套使用中，当在不同层级的`router-view`之间切换时，数据缓存可能会失效。 为了解决这个问题，我们可以采取一种策略：手动管理缓存的视图。具体来说，我们需要在`cachedViews`数组中添加一级菜单和三级菜单之间缺失的二级菜单的名称。这样，当用户在这些路由之间切换时，对应的组件将保持其缓存状态。 以下是一个示例代码的解析： 我们导入所需的模块，如组件、树形数据处理函数等： ```javascript const _import = require('@/router/_import_prodection'); // 获取组件的方法 import { tree } from '@/utils/treeDate'; // 导入树形数据处理函数 import Layout from '@/views/layout'; // 导入布局组件 import EmptyTemplate from '@/views/layout/EmptyTemplate'; // 导入空模板组件 ``` 然后，我们创建一个名为`filterAsyncRouter`的函数，它接收一个包含所有路由的列表，并进行处理： ```javascript export function filterAsyncRouter(routerlist) { const routerlists = tree(routerlist); // 获取路由信息 // ... } ``` 在`filterAsyncRouter`函数中，我们遍历并修改每个路由对象，删除不必要的属性，设置组件和路径，并为`meta`对象配置图标和标题。对于多层路由，我们使用一个空模板`EmptyTemplate`来处理中间层的路由，以确保缓存正确。 `EmptyTemplate`组件的代码如下： ```html <template> <div> <app-main/> </div> </template> <script> import { AppMain } from './components' export default { name: 'EmptyTemplate', components: { AppMain } } </script> ``` 这个组件的作用是在多层路由中作为占位符，保存中间层的组件状态。 我们需要在`tagsViewd.js`中的`cachedViews`数组中添加`EmptyTemplate`的名称，以便缓存这个中间层的组件： ```javascript const state = { visitedViews: [], cachedViews: ['EmptyTemplate'] // 添加空模板的name }; ``` 通过以上步骤，我们解决了`keep-alive`在多层级路由菜单中不能正确缓存的问题。这个方案的关键在于理解`keep-alive`的工作原理，并手动管理需要缓存的视图列表。这样，即使在更复杂的路由结构中，也能确保组件的状态得到有效的保留。