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

​

​

​