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

最新推荐文章于 2024-04-28 15:24:12 发布

2401_84091993

最新推荐文章于 2024-04-28 15:24:12 发布

阅读量888

点赞数 13

分类专栏：程序员文章标签： vue.js 缓存 java

本文链接：https://blog.csdn.net/2401_84091993/article/details/137987556

版权

程序员专栏收录该内容

171 篇文章 0 订阅

订阅专栏

路由配置

{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;

}

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

这里页面被缓存之后再次返回会调用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);