最近想用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,这种方式,可以支持编辑同一组件的多个明细页,效果如下: