vue后台管理系统解决keep-alive页面路由参数变化时缓存问题

更新日期: 2019-03-31阅读: 3076标签: 缓存
场景描述:一个后台管理系统,一个列表页A路由配置需要缓存,另一个页面B里面有多个跳转到A路由的链接。
问题描述:首先访问/A?id=1页面,然后到B页面再点击访问A?id=2的页面,发现由于页面A设置了缓存,数据还是id=1的数据,并没有更新。
路由跳转情况:/B --> /A?id=1 --> /B --> /A?id=2

ps: 本文记录了一下处理问题的思路,如需解决方案可直接查看文章最后。


解决思路分析

1. 尝试思路一:watch监听

watch 监听query参数变化,判断参数是否发生变化。

watch: {
    '$route.query.id': function(newVal, oldVal){
        console.log(newVal, oldVal);
    }
}

未解决问题的原因: watch只能在离开页面时才能取到oldVal的值,如果非要以此方法处理就必须要在vuex里面保存这个值,下次再进行判断,处理比较繁琐。


2. 尝试思路二: deactivated 及 activated 配合判断

由于第一步我们发现,oldVal在离开组件时才能获取到,故而想到了使用deactivated来存这个query值。然后再次进入这个路由时,用activated 去判断试试。

computed: {
    id() {
        return this.$route.query.id
    }
},
data () {
    return {
        oldId: '', //旧参数,用于判断是否缓存
    }
},
activated() {
    // 比较你的id:
    if(this.id != this.oldId){
        // 重新刷新数据...
    }
},
deactivated() {
    console.log('保存旧值',this.id)
    // this.oldVin = this.id;
    this.oldVin = this.$route.query.id;
},

然而,理想很丰满,实际却发现在deactivated中,this.id 及 this.$route.query.id的值都为null。也就是deactivated获取不到computed计算的值和this.$route.query的值。


3. 思路三:keep-alive的include属性(尚未实践)

利用vuex动态改变keep-alive的include属性的值,实现动态设置路由是否缓存。
但是这个地方有个问题,如果侦听到id参数变化了,那么需要把路由A设置为不缓存,那么违背了路由A原本需要缓存的需求,此处还希望大家探讨一下。。。


解决方案

给router-view设置key为路由的完整路径即可。最后找到这种实现方案,能够解决我的问题,实在简单!

<keep-alive :include="cacheList">
    <router-view :key="$route.fullPath"></router-view>
</keep-alive>

最后,文笔不好,喜欢大佬们海涵,共勉。

来自:https://segmentfault.com/a/1190000018703137


链接: https://www.fly63.com/article/detial/2611

浏览器缓存_HTTP强缓存和协商缓存

浏览器缓存主要分为强强缓存(也称本地缓存)和协商缓存(也称弱缓存),强缓存是利用http头中的Expires和Cache-Control两个字段来控制的,用来表示资源的缓存时间。协商缓存就是由服务器来确定缓存资源是否可用.

angularjs 缓存详解

一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求。缓存能够服务的请求越多,整体系统性能就提升得越多。

浏览器缓存问题原理以及解决方案

浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中,为什么使用缓存:减少网络带宽消耗,降低服务器压力,减少网络延迟,加快页面打开速度

Web缓存相关知识整理

一个H5页面在APP端,如果勾选已读状态,则下次打开该链接,会跳过此页面。用到了HTML5 的本地存储 API 中的 localStorage作为解决方案,回顾了下Web缓存的知识

使用缓存加速之后的网站访问过程变化

在描述CDN的实现原理之前,让我们先看传统的未加缓存服务的访问过程,以便了解CDN缓存访问方式与未加缓存访问方式的差别,用户访问未使用CDN缓存网站的过程为:用户向浏览器提供要访问的域名;

html页面清除缓存

页面打开时,由于缓存的存在,刚刚更新的数据有时无法在页面得到刷新,当这个页面作为模式窗口被打开时问题更为明显, 如何将缓存清掉?

HTTP之缓存 Cache-Control

通过在Response Header设置Cache-Control head 信息可以控制浏览器的缓存行为。我们先来看一下Cache-Control可以设置哪些值:缓存头Cache-Control只能在服务端设置,在客户端是由浏览器设置的,自己不能修改它的值。

工程化_前端静态资源缓存策略

增量更新是目前大部分团队采用的缓存更新方案,能让用户在无感知的情况获取最新内容。具体实现方式通常是(一般我们通过构建工具来实现,比如webpack):

前端静态资源自动化处理版本号防缓存

浏览器会默认缓存网站的静态资源文件,如:js文件、css文件、图片等。缓存带来网站性能提升的同时也带来了一些困扰,最常见的问题就是不能及时更新静态资源,造成新版本发布时用户无法及时看到新版本的变化,严重影响了用户体验。

缓存命中率过低;大量缓存项同时刷新;刷新同一个缓存项

缓存的作用是在内存中临时存储来自外部系统(如数据库)的数据,以便让请求更快的得到响应。如果请求数据在缓存中不存在,或者已经超时失效,那么也要从外部系统查询,然后放入缓存中,这个过程叫刷新缓存。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!