<router-view></router-view>

<keep-alive>
 <router-view></router-view>
</keep-alive>

render () {
  const slot = this.$slots.default
  const vnode: VNode = getFirstComponentChild(slot)
  const componentOptions: "htmlcode">

vnode.componentInstance = cache[key].componentInstance


否则，将 Vnode 保存在 cache 里：


cache[key] = vnode


于是当时用 keep-alive 时，我们就可以保存每个 route-view 的数据。
动态路由缓存问题及如何实现 
一、bug表象
最开始其实是不知道这个 bug 的，也是通过现象反推，然后由源码解决这个问题的，那就先从现象说起：
动态路由缓存的的具体表现在：
由动态路由配置的路由只能缓存一份数据。 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: "htmlcode">

<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]: "color: #ff0000">如何集成

因为放假赶车的关系，粗略说一下，有问题直接在底下评论：
一、修改package.json：
npm install时不下载 vue ，修改 packjson.js 改为本地的 vue："vue": "file:./vue2.5.0/" 


"dependencies": {
 "axios": "^0.18.0",
 "clipboard": "^2.0.0",
 "codemirror": "^5.38.0",
 "countup": "^1.8.2",
 "cropperjs": "^1.2.2",
 "dayjs": "^1.7.7",
 "echarts": "^4.0.4",
 "html2canvas": "^1.0.0-alpha.12",
 "iview": "^3.2.2",
 "iview-area": "^1.5.17",
 "js-cookie": "^2.2.0",
 "simplemde": "^1.11.2",
 "sortablejs": "^1.7.0",
 "tree-table-vue": "^1.1.0",
 "v-org-tree": "^1.0.6",
 "vue": "file:./vue2.5.0/",
 "vue-i18n": "^7.8.0",
 "vue-router": "^3.0.1",
 "vuedraggable": "^2.16.0",
 "vuex": "^3.0.1",
 "wangeditor": "^3.1.1",
 "xlsx": "^0.13.3"
},


二、修改所有本地 import vue 为本地文件：


// import Vue from 'vue'
import Vue from '../vue-2.5.10/src/core/index'


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                

                                    vue,动态路由缓存,vue源码实现动态路由缓存 
                                

                                    标签：
                                        
vue,动态路由缓存,vue源码实现动态路由缓存
                                     

                                
极乐门资源网 Design By www.ioogu.com