详解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属性就可以拿到匹配到的路由组件，把它加入到cachedViews数组就好了。但是有个问题就是，假设这里有个二级路由1-1，三级路由1-1-1，1-1-2，当要关掉1-1-1组件时，你到底要不要把1-1给删了，如果删了，缓存能顺利失效，但是如果你之前是打开了1-1-2，缓存的路由就会失效，因为它是依赖1-1的。如果不删的话，在侧边栏打开1-1-1的链接的时候，它又会重新复用回原本的组件。

2 把三级（概念上的）转化为二级（真实）

在这里想来，如果1-1-1，1-1-2，其实只是因为分在同类别里，两者如果没有实际共享的数据，那可以考虑把1-1的路由组件关掉，在我实践的项目就是如此，1-1-1和1-1-2只是同属在二级菜单下，并没有共享数据。但是生成菜单的时候是用router表的，那么生成菜单的用原本的，生成路由的时候用替换的。

下面是demo代码：

将要被替换的路由加上noCompoent属性。

function delteFakeParent(router,prefix) {
 var newRouter = { ...router }
 if(prefix){
 newRouter.path = prefix + '/' + router.path
 }
 if (!router.children) return newRouter
 var children = []
 if (router.noCompoent) {
 for (let i = 0; i < router.children.length; i++) {
  const item = delteFakeParent(router.children[i], newRouter.path)
  if (Array.isArray(item)) {
  item.forEach(el => {
   children.push(el)
  })
  }else{
  children.push(item)
  }
 }
 newRouter = children
 } else {
 for (let i = 0; i < router.children.length; i++) {
  const item = delteFakeParent(router.children[i])
  if (Array.isArray(item)) {
  item.forEach(el => {
   children.push(el)
  })
  }
 }
 newRouter.children = children
 }
 
 return newRouter
}

var backendManageRouter1 = {
 name: 'BackendManage',
 meta: {
 title: '后台管理',
 icon: 'index-management'
 },
 children: [{
 path: 'user-manage',
 name: 'UserManage',
 noCompoent: true,
 meta: {
  title: '用户管理',
  icon: 'rule-definition'
 },
 alwaysShow: true,
 children: [{
  path: 'user',
  name: 'User',
  meta: {
  title: '用户管理',
  icon: 'quality-control'
  },
  noCompoent: true,
  children: [
  {
   path: 'a',
   name: 'ad',
   meta: {
   title: 'ad管理',
   icon: 'quality-control'
   },
  }
  ]
 }, {
  path: 'role',
  name: 'Role',
  meta: {
  title: '角色管理',
  icon: 'rule-task-monitor'
  }
 }]
 }]
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻名称：详解vue-template-admin三级路由无法缓存的解决方案-创新互联
本文URL：http://cdxtjz.cn/article/cshsod.html