vnode.key就是路由里边定义的name，所以要用这套方案来实现的根据不同参数展示不同视图的功能就要对这里的key做改造，但是keep-alive是vue自带的，没法改底层，然后就诞生了我的第二套方案
方案二：navigation组件，scrollbehavior
github上找到类似功能的组件vue-navigation，这个vue组件可以实现返回走缓存，底层原理跟keep-alive一样，实际上是改写了keep-alive组件，前进刷新时新增了一个参数VNK，这样在路由发生变化的时候都会用给url带一个参数，并且cache的key取值依赖这个参数，借鉴这个组件的思路，做了一个类似keep-alive的组件，其中key的值是getKey方法获取的，改写以后的render方法如下
render () { var vnode = this.$slots.default ? this.$slots.default[0] : null if (vnode) { vnode.key = vnode.key || (vnode.isComment ? 'comment' : vnode.tag) const { cache, keys } = this var key = getKey(this.$route, keyName) if (vnode.key.indexOf(key) === -1) { vnode.key = '__navigation-' + key + '-' + vnode.key } if (cache[key]) { if (vnode.key === cache[key].key) { vnode.componentInstance = cache[key].componentInstance } else { cache[key].componentInstance.$destroy() cache[key] = vnode } 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 }
getKey方法实现
//url上新增参数vnk的值 export function genKey() { // const t = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' const t = 'xxxxxxxx' return t.replace(/[xy]/g, function (c) { const r = Math.random() * 16 | 0 const v = c === 'x' ? r : (r & 0x3 | 0x8) return v.toString(16) }) } // export function getKey(route, keyName) { return `${route.name || route.path}?${route.query[keyName]}` }
通过新写一个install方法挂载这个导航组件到vue上就可以实现前进刷新，返回走缓存，并且可以配置最大缓存数，后续开源到github
最后剩下返回上一页记住上一页的位置，之所以没有用开源的这个组件的记位置，是因为直接套用需要改整体布局，height:100%;样式造成$(windows).scrollTop失效，整体考虑改造成本较大，还是使用了vue-router提供的scrollBehavior,在路由配置里引入
实现如下：
var scrollBehavior = async (to, from, savedPosition) => { if (savedPosition) { return savedPosition } else { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ x: 0, y: to.meta.savedPosition || 0 }) }, 300) }) } } const router = new VueRouter({ mode: 'history', scrollBehavior, routes: [{ path: '', redirect: '/mobile/home.html', meta: { needMtaReport: true, parentsStyle: { height: '100%', minHeight: '100%' } } }, { name: 'scienceCompetition', path: '/mobile/scienceCompetition.html', component: scienceCompetition }] }
总结：
1.单页缓存下js加载解析编译执行的时间缩短了，返回的时候由于走缓存js脚本的占用时间完全可以忽略，从而整体上缩减了页面的加载渲染时间
2. 因为项目以前不是单页，代码里边定义了很多全局变量或者全局事件绑定，改成单页后全局变量的值依然存在，就会导致业务逻辑出现bug，所以使用单页需要注意全局变量或是事件的谨慎使用，具体的踩坑记录在https://www.jb51.net/article/147957.htm
3.通过push进入下一页时，head里边会累加前面页面的静态资源，访问的页面越多，最后的页面挂的静态的资源越多，返回的时候并不会减少已经加载的静态资源，单页缓存是典型的空间换时间的方案，内存的开销比较大，能否对资源动态增减以及内存占用的优化一直在探索中，暂时没有找到很好的解决方法。。。。。