由动态路由配置的路由只能缓存一份数据。 keep-alive 动态路由只有第一个会有完整的生命周期，之后的路由只会触发 actived 和 deactivated 这两个钩子。 一旦更改动态路由的某个路由数据，期所有同路由下的动态路由数据都会同步更新。
我们的期望其实是在使用 keep-alive 的情况下，动态路由能有非动态的表现，即拥有 完整的生命周期 、 各自的数据缓存 。
二、发掘问题关键
入手 keep-alive 源码发现，其实问题就出现在这一步：
if ( // not included (include && (!name || !matches(include, name))) || // excluded (exclude && name && matches(exclude, name)) ) { return vnode }
通过上面的表象其实可以探究出， router-view 其实是已经缓存了，而且一个动态路由的 router-view 都是通过了 if 判断返回了 Vnode 。那么再看一下这个 name 是什么：
function getComponentName (opts: ?VNodeComponentOptions): ?string { return opts && (opts.Ctor.options.name || opts.tag) } const name: ?string = getComponentName(componentOptions)
这里的 opts 其实对应的就是 VueComponent 的 ＄options ，而 this.＄options.name 不就是对应着得 .vue 文件里声明的 name 属性。然后又想到，怪不得配置路由的时候要求提供的 name 属性要和组件内部的 name 值保持一致。
看到这里，问题已经水落石出了，因为动态路由配置的组件相同， getComponentName 每次返回相同 name ，然后 render() 去缓存了相同的 Vnode ，且只能缓存了一份。既然如此，只要能正确的缓存 Vnode 和取出 Vnode ，动态路由情况下， keep-alive 依然能正常运行。
修改Vue源码
上面说到了是因为动态路由组件名的问题，如果将缓存的 key 设置为唯一不就行了吗？
于是在 router-view 上配置key，key取得师path，永远唯一：
<keep-alive :include="cacheList"> <router-view :key="$route.path"></router-view> </keep-alive>
然后修改 keep-alive.js 源码，如下（因为放假的关系不详细说了，直接贴源码，实现的人就是我，也是第一个，github上此BUG目前还是open状态）:
/* *@flow *modify by LK 20190624 */ import { isRegExp, remove } from 'shared/util' import { getFirstComponentChild } from 'core/vdom/helpers/index' type VNodeCache = { [key: string]: ?VNode }; function getComponentName (opts: ?VNodeComponentOptions): ?string { return opts && (opts.Ctor.options.name || opts.tag) } function matches (pattern: string | RegExp | Array<string>, key: string | Number): boolean { if (Array.isArray(pattern)) { return pattern.indexOf(key) > -1 } else if (typeof pattern === 'string') { return pattern.split(',').indexOf(key) > -1 } else if (isRegExp(pattern)) { return pattern.test(key) } /* istanbul ignore next */ return false } function pruneCache (keepAliveInstance: any, filter: Function) { const { cache, keys, _vnode } = keepAliveInstance for (const key in cache) { const cachedNode: ?VNode = cache[key] if (cachedNode) { // const name: ?string = getComponentName(cachedNode.componentOptions) if (key && !filter(key)) { pruneCacheEntry(cache, key, keys, _vnode) } } } } function pruneCacheEntry ( cache: VNodeCache, key: string, keys: Array<string>, current?: VNode ) { const cached = cache[key] if (cached && (!current || cached.tag !== current.tag)) { cached.componentInstance.$destroy() } cache[key] = null remove(keys, key) } const patternTypes: Array<Function> = [String, RegExp, Array] export default { name: 'keep-alive', abstract: true, props: { include: patternTypes, exclude: patternTypes, max: [String, Number] }, created () { this.cache = Object.create(null) this.keys = [] }, destroyed () { for (const key in this.cache) { pruneCacheEntry(this.cache, key, this.keys) } }, mounted () { this.$watch('include', val => { pruneCache(this, key => matches(val, key)) }) this.$watch('exclude', val => { pruneCache(this, key => !matches(val, key)) }) }, render () { const slot = this.$slots.default const vnode: VNode = getFirstComponentChild(slot) const key: ?string = vnode.key == null // same constructor may get registered as different local components // so cid alone is not enough (#3269) ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '') : vnode.key const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions if (componentOptions) { // check pattern const name: ?string = getComponentName(componentOptions) const { include, exclude } = this if ( // not included (include && (!key || !matches(include, key))) || // excluded (exclude && key && matches(exclude, key)) ) { return vnode } const { cache, keys } = this if (cache[key]) { vnode.componentInstance = cache[key].componentInstance // make current key freshest remove(keys, key) keys.push(key) } else { cache[key] = vnode keys.push(key) // prune oldest entry if (this.max && keys.length > parseInt(this.max)) { pruneCacheEntry(cache, keys[0], keys, this._vnode) } } vnode.data.keepAlive = true } return vnode || (slot && slot[0]) } }
如何集成
因为放假赶车的关系，粗略说一下，有问题直接在底下评论：
一、修改package.json：
npm install时不下载 vue ，修改 packjson.js 改为本地的 vue："vue": "file:./vue2.5.0/"