一、失效原因:
如果多级路由的话,一般会有一个空白的router-view页面做为公共的模板充当中间的嵌套路由/页面;当你切换不同的页面,中间公共部分的组件,一会儿缓存,一会儿不缓存,因为是公共组件,导致了
最终的页面缓存失效。
二、解决办法:
目前我认为只有将三级路由转为二级路由来解决比较靠谱;
以我自己的项目为例,最终将接口返回的动态路由利用 this.safe.$router.addRoutes(aRouter), 来进行路由的注册,那么我们就需要在注册之前,将树形结构的三级或更多级转换位二级路由;
具体的转换参考如下代码, 利用两个递归将中间的路由来过滤掉;
function generateFlatRoutes(accessRoutes) { let flatRoutes = []; for (let item of accessRoutes) { let childrenFflatRoutes = []; if (item.children && item.children.length > 0) { childrenFflatRoutes = castToFlatRoute(item.children, ""); } // 一级路由是布局路由,需要处理的只是其子路由数据 flatRoutes.push({ name: item.name, path: item.path, component: item.component, redirect: item.redirect, children: childrenFflatRoutes }); } return flatRoutes; } /** * 将子路由转换为扁平化路由数组(仅一级) * @param {待转换的子路由数组} routes * @param {父级路由路径} parentPath */ function castToFlatRoute(routes, parentPath, flatRoutes = []) { for (let item of routes) { if (item.children && item.children.length > 0) { if (item.redirect && item.redirect !== 'noRedirect') { flatRoutes.push({ name: item.name, path: item.path, redirect: item.redirect, meta: item.meta }); } castToFlatRoute(item.children, parentPath + "/" + item.path, flatRoutes); } else { flatRoutes.push({ name: item.name, path: item.path, component: item.component, meta: item.meta }); } } return flatRoutes; } let lastAroutes = generateFlatRoutes(aRouter);
function generateFlatRoutes(accessRoutes) { let flatRoutes = []; for (let item of accessRoutes) { let childrenFflatRoutes = []; if (item.children && item.children.length > 0) { childrenFflatRoutes = castToFlatRoute(item.children, ""); } // 一级路由是布局路由,需要处理的只是其子路由数据 flatRoutes.push({ name: item.name, path: item.path, component: item.component, redirect: item.redirect, children: childrenFflatRoutes }); } return flatRoutes; } /** * 将子路由转换为扁平化路由数组(仅一级) * @param {待转换的子路由数组} routes * @param {父级路由路径} parentPath */ function castToFlatRoute(routes, parentPath, flatRoutes = []) { for (let item of routes) { if (item.children && item.children.length > 0) { if (item.redirect && item.redirect !== 'noRedirect') { flatRoutes.push({ name: item.name, path: (parentPath + "/" + item.path).substring(1), redirect: item.redirect, meta: item.meta }); } castToFlatRoute(item.children, parentPath + "/" + item.path, flatRoutes); } else { flatRoutes.push({ name: item.name, path: (parentPath + "/" + item.path).substring(1), component: item.component, meta: item.meta }); } } return flatRoutes; }
以上通过两个递归的函数,将aRouter 这个多层级的树形结构转换为最多两级的树形结构,进而实现了将多级路由转为为二级路由;
具体递归使用还需要根据自己的返回数据进行微调!!!