vue缓存问题 - cch‘s blog

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

关于vue路由缓存问题

需求是这样的，有个移动webApp，下面有4个tab可以切换，然后其中有个页面有个列表，在列表页点击某些功能可以跳转至页面B、页面C,页面C返回的时候列表不能刷新，滚动条需要在原来的位置，然而在C页面做了一些操作的时候是会影响列表项的值的，做了这些操作的话，返回列表页需要刷新数据。

我的解决方案当然是用 keep-alive 了，然后把他的 includes 绑定到状态中去，这样可以方便的进行增加、删除。然后在列表页面中添加路由守卫，当判断要跳转到B、C页面的时候，把当前页面添加到缓存中，如果在二级页面需要删除缓存，则在状态管理里把缓存删掉，这样回到列表页之后就会刷新了。

需要注意的是includes中使用的是组件的名称进行缓存的，所以组件的命名要规范，有语义，最好不要重复。

在状态管理中添加缓存的状态和一些动作

新建cache.js

import Vue from 'vue'
const cache = {
    state: {
        cacheComps: [] // 缓存组件
    },
    mutations: {
        addCacheComp: (state, name) => {
            if (!state.cacheComps.includes(name)) {
                state.cacheComps.push(name)
            }
        },
        removeCacheComp: (state, name) => {
            const index = state.cacheComps.indexOf(name)
            console.log('index:' + index)
            if (index > -1) {
                Vue.set(state, 'cacheComps', state.cacheComps.splice(index, 1))
            }
        }
    }
}

export default cache

添加路由守卫

beforeRouteLeave (to, from, next) { // 缓存策略，当页面离开前判断 是不是以下几个路由，如果是，添加至状态，不是则清空
        console.log(to)
        const cachePath = ['a','b']
        const needCache = cachePath.some(item => to.path.indexOf(item) >= 0)
        if (needCache) {
            // 由于我是嵌套路由实现的tab 所以需要缓存父子的组件
            this.$store.commit('addCacheComp', 'layout')
            this.$store.commit('addCacheComp','list')
        } else {
            this.$store.commit('removeCacheComp', 'layout')
            this.$store.commit('removeCacheComp','list')
        }
        next()
}

适当情况下清空缓存

在B或C页面做了某些提交操作，影响列表数据时需要删除缓存：

commit(){
    doCommit().then(() => {
        // ...
        this.$store.commit('removeCacheComp', 'layout')
        this.$store.commit('removeCacheComp','list')
    })
}

推荐文章

挂过科的镜子 · VUE 使用 select 标签添加点击选项的触发事件_vue select事件

3 周前

风度翩翩的大海 · vue中vuedraggable拖拽插件使用，指定范围拖拽。_vuedraggable拖拽范围

2 周前

聪明伶俐的枇杷 · vue如何拖动视图要素 • Worktile社区

2 周前

光明磊落的书签 · 在vue2项目里面引用vuedraggable ,vue拖拽之后松开就会复原 end事件没有任何发应，start事件可以监听到开始拖拽 · Issue #1246 · SortableJS/Vue

2 周前

儒雅的小刀 · Vue密码都用什么加密 • Worktile社区

2 周前

重感情的豌豆 · 中华人民共和国公证法-公证管理-深圳市司法局网站

1 月前

重情义的甘蔗 · 每天学点技术-springboot2.1.0 参考文档

2 月前

爱跑步的电影票 · 现实批判与文明反思的现代寓言——评范小青长篇小说《战争合唱团》--专题--中国作家网

2 月前

开朗的熊猫 · [实验] Django 最大值、最小值、平均值等特殊数值的数据查询 – Eternal Center

2 月前

另类的人字拖 · 维珍航空与中国东方航空建立合作伙伴关系，为中国多个城市提供前往伦敦的便捷飞行航线-手机中网资讯

6 月前