1.聊一聊实现Vue路由组件缓存遇到的框框架’坑‘
2.elementui源码学习之仿写一个el-timeline
聊一聊实现Vue路由组件缓存遇到的’坑‘
项目背景介绍
在进行公司后台管理系统开发时，遇到了一个在使用keep-alive和vue-router实现的架源介绍路由组件缓存不生效的问题。该项目基于iview-admin@2.0进行开发，框框架全局状态管理采用vuex分module实现，架源介绍路由配置采用vue-router进行表方式实现。框框架项目属于基于RBAC的架源介绍qq远程协助 源码后台管理系统，涉及多用户多角色的框框架权限控制和动态系统菜单功能。
问题解决
梳理问题并核对官方文档后，架源介绍发现基本用法和组件缓存原理均无误。框框架但深入检查后发现，架源介绍问题出现在keep-alive的框框架include参数设置上。iview-admin@2.0中通过路由meata参数——notCache控制组件缓存。架源介绍官方文档指出，框框架当设为true时，架源介绍页面在切换标签后不会缓存，框框架但若需要缓存，则无需设置notCache字段，php微信投票系统源码并确保页面组件的name属性与路由配置的name一致。项目中路由配置由后台功能决定，修改无法缓存页面的路由配置的name即可解决。
研究iview-admin源码
研究发现，iview-admin中将navTagList、menuList等数据保存在全局vuex的app模块中，navTagList动态更新当前打开的标签页，menuList根据路由记录的沐雪微信平台源码meta参数的access字段过滤。cacheList作为getters，计算出需要keep-alive缓存的组件name数组。通过动态修改keep-alive组件的exclude值来更新路由缓存规则。
iview-admin的局限性
iview-admin的权限路由控制采用路由meta参数的access数组来标记路由可访问的用户角色，根据路由记录计算用户菜单。这种实现存在不足，需要优化。
优化方案
对iview-admin的企业宣传网站源码权限控制和路由配置进行优化，将路由分为基础路由和业务路由。基础路由直接配置到router中，业务路由动态注册。在vuex的user模块中添加获取用户路由配置的action，在用户登录成功后动态注册路由。
进一步研究
未来计划深入研究vue-router的view部分源码，理解router-view与keep-alive的关联。后续更新将在此分享。验证码接收平台 源码
elementui源码学习之仿写一个el-timeline
本文记录了仿写el-timeline组件的细节，以深入理解饿了么UI组件的实现机制。本系列文章将持续更新，深入探讨elementui源码的学习与实践。可访问开源仓库，通过npm start运行代码，结合注释辅助理解。
时间线组件构成包括：时间线小圆点、时间线竖线条、时间戳与具体内容详情四个部分。如图所示。
时间线组件主要需求包括：按时间线正序或倒序展示、自定义时间线小圆点样式与颜色、使用小图标替代时间线小圆点、控制时间戳与具体内容详情的位置、时间戳的显示与隐藏。
对官方组件的见解包括：提供与注入可以简化、时间戳位置优化、简约封装参考其他库组件。Antd与iview的时间线组件参数较为精简。
回顾知识点：数组方法的使用，如this.$slots.default.reverse()；以及`:style`中的四元表达式应用，如`:style="border: ${ elementIcon} ${ borderColor}"`。
组件代码示例如下：`myTimeline`、`myTimelineItem`。完整代码在开源仓库，欢迎访问并star。
若本文对您有所助益，期待您的star，感谢支持！
