解决基于 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 相关文章推荐
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
详解JS函数重载
Dec 04 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
用React Native制作一个简单的游戏引擎
May 27 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
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+DBM的同学录程序(5)
2006/10/09 PHP
《APMServ 5.1.2》使用图解
2006/10/23 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python中的匿名函数使用简介
2015/04/27 Python
Python实现计算最小编辑距离
2016/03/17 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
单位提档介绍信
2014/01/17 职场文书
小学教师师德感言
2014/02/10 职场文书
施工安全责任书
2014/04/14 职场文书
病人慰问信范文
2015/02/15 职场文书
毕业生自荐信范文
2015/03/05 职场文书
团组织关系介绍信
2019/06/24 职场文书
javascript对象3个属性特征
2021/11/17 Javascript
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript