vue单页应用页面缓存方案----纯干货

路由配置

{path: ‘/’, meta: {Home: “Home”, keepAlive: true}, component: require(‘@/components/Home’)},

其中transitionName为加载页面时的动画效果名称，这里不涉及到。相比上一段代码，通过对比发现下一段要复杂一些，其中我们通过路由配置中配置的keepAlive来动态的使用的router-view。如果keepAlive:true的时候我们使用keep-alive包裹的router-view，否则我们直接使用router-view进行页面加载，这样就能解决哪些页面需要缓存，哪些不需要缓存的问题了，只需要在配置路由的时候在meta中配置一个keepAlive:true/false即可。然后义务逻辑往往比我们这个更加复杂，虽然不在进行加载数据，页面缓存在了内存中，但是当我们返回的时候，页面并没有保留在离开这个页面时滚动到的位置，这个问题相对比较好解决。解决方式有多种，下面说一下我的解决思路（简单粗暴）。当页面在滚动的时候我们可以通过监听scroll记录一下页面的滚动位置，然后通过一个变量记录滚动的位置，由于页面是缓存在内存中的，所以变量的值一直有效，在我们返回到页面的时候会执行activated方法。这个方法和methods方法平级，在方法中我们只需要控制页面滚动到记录的位置即可

activated() {

if (this.scrollTop) {

this.$refs.wrapper.scrollTop = this.scrollTop;

}

}

通过以上的步骤我们就可以解决比较简单的页面滚动返回时页面状态无法保留的问题了，是否所有都可以满足呢？不幸的