解决基于 keep-alive 的后台多级路由缓存问题


Posted in Javascript onDecember 23, 2020

用过 vue-element-admin 的同学一定很清楚,路由的配置直接关系侧边栏导航菜单的展示,也得益于这种设计思路,几乎大部分后台框架都采用这个方案,当然也包括了我写的 Fantastic-admin 这个中后台框架。

但这个方案有个明显的问题,就是为了实现多级侧边栏导航菜单,则需要将路由配置成多级嵌套的形式,一旦超过两级,达到三级甚至更多级,就需要增加一个空布局页面(Empty.vue)用来给 component 使用,仅仅是为了生成层级菜单。此时就出现了一个问题,因为 keep-alive 是在 Layout 上处理的,所以超过两级以上的路由都会变得难以处理,也没有一个相对完美的解决方案。

在思考并解决这个问题之前,我们先来看下页面大致结构:

+------------------------------+
| Layout            |
| +------------------------+ |
| | Empty         | |
| | +------------------+ | |
| | | Page       | | |
| | +------------------+ | |
| +------------------------+ |
+------------------------------+

首先 keep-alive 是在 Layout 上进行处理,如果不缓存 Empty ,则 Empty 下面的页面将无法被缓存,如果缓存 Empty ,又会导致 Empty 里面的所有页面都被缓存,无法按需清除,相信接触过的同学肯定感同身受其中的大坑。

解决基于 keep-alive 的后台多级路由缓存问题

解决思路

其实有一个相对清晰简单的解决思路,既然缓存二级路由是没问题,而超过二级的中间层级页面也是没太大意义的,那为什么不将路由直接处理成二级,这样页面显示也就是二级的结构。

+------------------------------+        +------------------------------+
| Layout            |        | Layout.vue          |
| +------------------------+ |        | +------------------------+ |
| | Empty         | | +----------> | | Page          | |
| | +------------------+ | |        | |            | |
| | | Page       | | |        | |            | |
| | +------------------+ | |        | |            | |
| +------------------------+ |        | +------------------------+ |
+------------------------------+        +------------------------------+

这里需要注意,路由配置还是保持多级嵌套的形式,而这个配置并非最终注册使用的路由,仅仅是提供侧边栏导航菜单使用,同时再生成一份用于动态注册路由的数据,图例如果没看明白的话,可以看下面两组数据。

// 原始数据(用于侧边栏导航菜单)
{
  path: '/users',
  meta: {
    title: '用户管理'
  },
  children: [
    {
      path: 'clients',
      meta: {
        title: '客户管理'
      },
      children: [
        {
          path: 'list',
          meta: {
            title: '客户列表'
          }
        },
        {
          path: 'detail',
          meta: {
            title: '客户详情'
          }
        }
      ]
    }
  ]
}

// 处理后数据(用于动态注册路由)
{
  path: '/users',
  meta: {
    title: '用户管理'
  },
  children: [
    {
      path: 'clients/list',
      meta: {
        title: '客户列表'
      }
    },
    {
      path: 'clients/detail',
      meta: {
        title: '客户详情'
      }
    }
  ]
}

通过一个递归函数就可以处理好路由的数据,但这还不够,因为还需要处理面包屑导航。

原有的面包屑导航是通过 $route.matched 可以获取到嵌套路由每一层级的信息,而当路由被处理成两级后,也就无法通过 $route.matched 进行显示了,所以在处理路由数据的同时,也需要处理面包屑导航的信息。大致最终会处理成这样:

{
  path: '/users',
  meta: {
    title: '用户管理'
  },
  children: [
    {
      path: 'clients/list',
      meta: {
        title: '客户列表',
        breadCrumb: [
          { path: '/users', title: '用户管理' },
          { path: 'clients', title: '客户管理' },
          { path: 'list', title: '客户列表' }
        ]
      }
    },
    {
      path: 'clients/detail',
      meta: {
        title: '客户详情',
        breadCrumb: [
          { path: '/users', title: '用户管理' },
          { path: 'clients', title: '客户管理' },
          { path: 'detail', title: '客户详情' }
        ]
      }
    }
  ]
}

这样一来,通过 $route.meta.breadcrumb 就可以获取任意某个路由的完整面包屑导航信息了。最终效果如下:

解决基于 keep-alive 的后台多级路由缓存问题

通过图片可以看到,这种方案也还是有一定的限制,就是路由被处理成二级后,多级嵌套关系不存在了,也就是不能在 Empty 里写任何代码,因为都会被忽略掉,只保留顶级和最深层的底级两个路由。

当然通过实际情况考虑,这种限制并没有大问题,因为在后台系统里,本身模块相对独立,即便侧边栏导航菜单是嵌套层级关系的,在右侧内容展示区域,几乎都是独立模块展示,无需嵌套。

实例代码

本文主要是讨论实现思路,相关代码可在 Fantastic-admin 里查看,核心代码在这,点击查看。

到此这篇关于解决基于 keep-alive 的后台多级路由缓存问题的文章就介绍到这了,更多相关 keep-alive多级路由缓存 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
jQuery实现增删改查
Dec 22 #jQuery
jQuery实现本地存储
Dec 22 #jQuery
jQuery实现电梯导航模块
Dec 22 #jQuery
jQuery实现tab栏切换效果
Dec 22 #jQuery
Vue3 实现双盒子定位Overlay的示例
Dec 22 #Vue.js
详解Vue的异步更新实现原理
Dec 22 #Vue.js
jQuery+ajax实现文件上传功能
Dec 22 #jQuery
You might like
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
JS hashMap实例详解
2016/05/26 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
详解python进行mp3格式判断
2016/12/23 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
美国五金商店:Ace Hardware
2018/03/27 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
维德科技C#面试题笔试题
2015/12/09 面试题
计算机专业毕业生求职信分享
2013/12/24 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
股东协议书范本2016
2016/03/21 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis