解决基于 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 相关文章推荐
javascript编程起步(第二课)
Jan 10 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 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
用PHP实现小型站点广告管理
2006/10/09 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
vue-router传参用法详解
2019/01/19 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
Python内置的字符串处理函数整理
2013/01/29 Python
wxPython学习之主框架实例
2014/09/28 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
基于python图像处理API的使用示例
2020/04/03 Python
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
舞蹈比赛获奖感言
2014/02/04 职场文书
cf战队收人广告词
2014/03/14 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
关于安全演讲稿
2014/05/09 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
2015年度物流工作总结
2015/04/30 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书