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

}

通过以上的步骤我们就可以解决比较简单的页面滚动返回时页面状态无法保留的问题了，是否所有都可以满足呢？不幸的是要做好远不止这么简单，下面我们再来思考一种场景，就是用户点击列表进入详情，详情滚动到底部查看评论，在评论项中点击图片进入另一个页面查看评论详情。这个时候就有个问题？这个详情页是否需要缓存？如果不缓存用户从评论详情返回的时候这个详情页会进行数据加载，又滚动到顶部了，这仍然是一个糟糕的体验。可能会觉得简单，再次缓存不就得了？开始我也是这么认为的，这么做的确是可以保留详情的状态，但是当用户从详情返回的时候还需要缓存吗？答案肯定是不能缓存，如果依旧缓存，这增加了内存的开销。所以我们就需要动态的控制这个详情页什么时候进行销毁？

这里页面被缓存之后再次返回会调用deactivated方法，如果我们不需要缓存这个页面，在deactivated方法中调用this.$destroy()方法进行销毁即可。我们通过这样的思路实现了，so easy！！！！然而在页面第一次进入的时候，点击评论进入评论详情页，再返回状态保留了。这一切很ok，当我们再次进入评论详情页返回的时候状态竟然不保留了，从新进入这个详情页也没有用。简直是无力吐槽啊，于是查阅资料，发现尤大大并不推荐我们手动的调用destroy方法进行页面的销毁。而是通过在keep-alive中配置include，include中接收一个数组，数组中包含的组件名则会被缓存，否者会被销毁。比如这样的["home’]，此处的home并不是我们在配置路由时候指定的name，而是我们在书写组件是定义的name属性。以下这样的

export default {

name:“home”

}

这个时候我们的顶级路由书写就变成了以下这样

其中catchPages即为你需要缓存的页面name组成的数组，由于这里牵涉到了不同页面的数据交互，所以我们使用vuex来对数据进行统一管理

const store = new Vuex.Store({

state: {

catchPages: [“home”]

},

mutations: {

add(state, item) {

if (state.catchPages.indexOf(item) === -1)

state.catchPages.push(item);

},

remove(state, item) {

let index = state.catchPages.indexOf(item);

if(index >0)

state.catchPages.splice(index, 1)

},

},

actions: {

add(state, item) {

state.commit(‘add’, item)

},

remove(state, item) {

state.commit(‘remove’, item)

}

},

getters: {

catchPages(context) {

return context.catchPages;

}

}

})

在全局初始化vue的时候将store传入即可，catchPages默认有一个元素即首页，首页一直缓存在内存中。后面需要缓存和移除缓存的时候调用store中提供的add和remove，传入组件名字。然后我们在组件内实现如下方法

beforeRouteLeave(to,from,next){

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】