vue不使用keep-alive下,实现多页签后台管理框架

最近想用vue开发一个多页签的后台管理框架,github搜了下,还是有不少的可以借鉴的源码。但是试用了下,发现由于keep-alive本身只能针对组件名,通过include及exclude做条件缓存,无法针对url做缓存,导致明细页的窗口无法实现缓存,下面是之前找过的vue-element-admin框架的一个说明:

我试了下,vue-element-admin虽然可以打开多个article,但是每次切换标签,会在activated事件执行重新加载数据,原先编辑一半数据会丢失。

做了多种尝试,由于keep-alive与vue-router捆绑得太紧,最终放弃使用keep-alive,尝试用动态组件的方式实现 多页签功能。

首先,我们利用vuex来存放标签页信息:

vuex state定义一个名叫pages的array

vuex mutations添加、删除页面的处理

第二步是,调整vue-router:

我这里将页面分为两种,一种是标签页,也就是放在主窗体里面的,打开有对应标签的页面,如列表界面、编辑界面;另一种是非标签页,如主窗体、错误页、登录页。

如上图,属于标签页的列表、编辑等页面有多了个name数据项,非标签页不需要,该name将传给component动态组件

接下来,根据刚才在routes定义的数据,对标签页组件做全局注册

第三步,在vue-router的beforeEach拦截标签页的路由,走自定义路由。这样处理,我们就可以通过url链接的方式来打开标签页,并可以通过url上传入参数:

我们将to.params及to.query也保留下来,以传给动态组件,至于权限验证这里就不再说明

最后,在主框架main.vue上,增加动态组件:

通过动态组件我们就可以实现多页签的后台管理框架,完全抛弃keep-alive,这种方式,可以支持编辑同一组件的多个明细页,效果如下:

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 10,766评论 0 11
  • 目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element★13489 ...
    余生社会阅读 20,351评论 7 233
  • Vue开源项目库 Vue.js开源项目速查表:https://www.ctolib.com/cheatsheets...
    cctN阅读 4,668评论 0 13
  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,346评论 8 124
  • 从小时候开始就有两面性,在朋友面前一个样,在家人面前一个样,如果朋友和家人同时存在就会很拘谨,很不自在。 心里真的...
    飘尼X阅读 1,495评论 0 0

友情链接更多精彩内容