实现全站的页面缓存，前进刷新，返回走缓存，并且能记住上一页的滚动位置，参考了很多技术实现，github上的导航组件实现的原理要么使用的keep-alive，要么参考了keep-alive的源码，但是只用keep-alive没法实现相同path，不同参数展示不同view，这就有点坑了，所以需要结合自己要实现的功能，适当改造keep-alive，为了实现每次前进都能刷新，返回走缓存还能自动定位的功能，文章陆续从以下几个方面展开讲：两套技术方案可选，最后定的技术方案的原因，实现的功能和原理，踩过的坑
方案一：vue的keep-alive组件
具体使用如下：
<keep-alive max="10">
<router-view/>
</keep-alive>为什么这么使用?
如vue官网（https://cn.vuejs.org/v2/api/#keep-alive）介绍：
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。主要用于保留组件状态或避免重新渲染。
因为缓存的需要通常出现在切换页面时，所以就需要结合vue-router的router-view来实现
为什么keep-alive能实现缓存？
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])
