keep-alive实现h5App前进刷新，后退缓存

最新推荐文章于 2024-04-10 14:06:05 发布

lea_

最新推荐文章于 2024-04-10 14:06:05 发布

阅读量825

点赞数

本文链接：https://blog.csdn.net/m0_46550723/article/details/104835870

版权

Vue.mixin({
    beforeRouteLeave (to, from, next) {
        // 页面缓存处理
        if(to.path.indexOf('Detail')!==-1){
            // 进入详情页时缓存记录
            from.meta.keepAlive = true
        }else{
            // 财务记录除进入详情页面，均不缓存，强制清除缓存
            if (this.$vnode && this.$vnode.data.keepAlive && from.path.indexOf('financialRecord')!==-1 && to.path.indexOf('Detail')===-1) {
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
                    if (this.$vnode.componentOptions) {
                        var key = this.$vnode.key == null ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '') : this.$vnode.key
                        var cache = this.$vnode.parent.componentInstance.cache
                        var keys = this.$vnode.parent.componentInstance.keys
                        if (cache[key]) {
                            if (keys.length) {
                                var index = keys.indexOf(key)
                                if (index > -1) {
                                    keys.splice(index, 1)
                                }
                            }
                            delete cache[key]
                        }
                    }
                }
                from.meta.keepAlive = true;
            }
        }
        next()
    }
})