解决基于 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获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
iView框架问题整理小结
2018/10/16 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
jQuery实现日历效果
2020/09/11 jQuery
python实战教程之自动扫雷
2018/07/13 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
Hammitt官网:设计师手袋
2020/05/23 全球购物
运动会广播稿100字
2014/01/11 职场文书
市场营销求职信范文
2014/02/21 职场文书
工会换届选举方案
2014/05/21 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书