官网解读 ：我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果。
即如果你有一个 盘点录入单 路由，但你想通过不同的传不同的 ID 来加载 CheckInputInfo 这个组件，若采用 params 方式，这时只需要在 path 后面配置 /:taskId 即可实现 CheckInputInfo/1 和 CheckInputInfo/2 这样的路由，同时可以通过 this.$route.params.taskId 来获取当前路由的 taskId 。
{ path: 'CheckInputInfo/:taskId', meta: { title: '盘点录入单' }, name: 'CheckInputInfo', component: () => import('@/view/Check/CheckInputInfo.vue') }
类似的，同样也可使用 query 方式，这时只需要在 path 后面配置 :taskId 即可实现 CheckInputInfo?taskId=1 和 CheckInputInfo?taskId=2 这样的路由,同时可以通过 this.＄route.query.taskId 来获取当前路由的 taskId 。
{ path: 'CheckInputInfo:taskId', meta: { title: '盘点录入单' }, name: 'CheckInputInfo', component: () => import('@/view/Check/CheckInputInfo.vue') }
vue-router 通过配置 params 和 query 来实现动态路由，并可通过 this.＄route.xx 来获取当前的 params 或 query ，省去了直接操作或处理 window.location ，还是挺方便的。
注意 ：当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
解读：在不使用 keep-alive 的情况下，我们每次加载路由，这时会重新 render 当前路由挂载的 component ，但若这两个路由是同一个路由组件配置的动态路由， vue 为了性能设计了不会重新 render 。
这显然不符合我们的预期，那么该如何在动态路由下拥有完整的生命周期呢？答案是 keep-alive 。
keep-alive
官网解读 ：keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
keep-alive通过缓存Vnode的方式解决了SPA最为关键的性能问题。以下，我就按步骤来分析以下：
一、路由触发路由组件重新render的问题
1、不缓存模式：
<router-view></router-view>
每次切换都会重新 render ，执行整个生命周期，每次切换时，重新 render ，重新请求，，必然不满足需求。
2、缓存模式：
<keep-alive> <router-view></router-view> </keep-alive>
只是在进入当前路由的第一次 render ，来回切换不会重新执行生命周期，且能缓存 router-view 的数据。
二、router-view 数据缓存问题
keep-alive 采用 render 函数来创建 Vnode ，一下是 vue v2.5.10 的 keep-alive.js 的 render() ：
render () { const slot = this.$slots.default const vnode: VNode = getFirstComponentChild(slot) const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions if (componentOptions) { // check pattern const name: ?string = getComponentName(componentOptions) const { include, exclude } = this if ( // not included (include && (!name || !matches(include, name))) || // excluded (exclude && name && matches(exclude, name)) ) { return vnode } const { cache, keys } = this 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 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]) } }
在 render 是获取到 Vnode ，若 cache[key] 存在，则:
vnode.componentInstance = cache[key].componentInstance
否则，将 Vnode 保存在 cache 里：
cache[key] = vnode
于是当时用 keep-alive 时，我们就可以保存每个 route-view 的数据。
动态路由缓存问题及如何实现
一、bug表象
最开始其实是不知道这个 bug 的，也是通过现象反推，然后由源码解决这个问题的，那就先从现象说起：
动态路由缓存的的具体表现在：