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