在使用Vue 开发后台管理往往用到多页面共存，标签栏导航模式。这里需要采用VueRouter提供的缓存方案运用 keep-alive 和 router-view 的结合。
由于目前 keep-alive 和 router-view 是强耦合的，我们从文档跟源码中发现keep-alive的include默认配备的是组件的name,所以在编写路由Router和对应的Vue组件是要确保name的唯一性，否则会出现递归内存溢出的问题。
但在实际业务场景中，同一类业务模式是可以使用通用型的父类模型Vue组件去实现，在由实际业务Vue组件继承，大部分功能业务代码非常少。我们以报表功能为例。如有100个报表，为了保证Vue组件的name唯一，每个报表都需要在项目中创建Vue组件实例，假设100个报表实例中有70个是简单业务报表，那么...
思考：那么能不能优雅的省去这70个Vue实例的创建呢？
我们来看看官网提到的共用Vue缓存的策略
第一个策略，非常不推荐，使用unInclude 有个很大的问题是组件缓存及销毁需要手动处理。实现繁琐难度较大。
第二个策略，可以使用。但也需要开发大量公共代码及可能存在的模式限制问题。
思考：首先我们不需要考虑通用组件，改name的策略，这种方式行不通（大家可自行尝试）。我们换一种思路，可否动态创建Vue呢？
我们知道官方在处理异步组件有Resolve函数（这里不明白的可以看 promise），下面是Resolve对象的方法参数。
函数对象不仅可以接受Vue路径对象，还可以接受一个Option的Vue实例。且动态路由懒加载也可以通过Resolve这个对象的，那将两者进行结合，我们来尝试下。
因为架构封装有些复杂，这里只提取代码片段，供理解，比较重要的我会加以说明
准备工作
（1）首先创建一个业务模版Vue
基本功能：template 有网格渲染功能标签组件，prop对象，只需要穿网格部分参数即可实现渲染
父类模版名称：baseViewGrid.Vue
（2）一个动态路由对象
结构可以与router对象一致
部分说明
Name:组件名称，需要确保唯一性
pageType: 页面类型（可省略）
Path:URL地址
routerParamterModel: 这个属性用于设置Vue对象或者路由参数，按自己业务实现即可
viewId:网格ID（用于赋值父模版网格参数信息）
让我们处理下动态路由的封装
动态路由加载的Vue组件不是所有的都需要懒加载，所以这里对类型进行的过滤处理。
createAsynListViewVueFactory可以看成一个异步加载组件工厂
Name:为动态路由的name
Extends:继承baseViewGrid
CustomViewGridParam:是父类定义的网格props传参对象（这里viewId 很关键）
这样动态路由就初始化完毕了，我们来看看效果
路由正常
我们用Vue tools 查看下组件
组件的定义与name 一致（注意，这里keep-alive 是通过name 创建缓存的所以组件定义与name一直）
同时也可以正常销毁组件。
这样就达到了我们动态创建Vue且缓存的目的。
按照我们上面的举例，我们只需要创建100个报表路由对象。70个使用异步加载组件工厂模式。这样我们就省下了70个Vue创建工作。在实际业务开发中，这种方式运用的非常广泛。大家可以自行尝试处理。
技术栈
ES6
Promise
Vue全家桶
Vue-element-admin(参考)
|
