前进刷新后退缓存及第一次缓存无效

A—>B—>C

A到B刷新，C到B缓存

App.vue里的代码字段

<keep-alive v-if="isRouterAlive" :exclude="excludeNameList"><router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="isRouterAlive && !$route.meta.keepAlive" :key="$route.fullpath" />

export default {name: 'App',data() {return {isRouterAlive: true}},provide() {return {reload: this.reload}},methods:{reload() {this.isRouterAlive = falsethis.$nextTick(() => (this.isRouterAlive = true))}}
}

B页面组件代码段

export default {inject: ['reload'],beforeRouteEnter(to, from, next) {to.meta.keepAlive = trueif (from.path !== '/evaluation/C') {next(vm => vm.reload())} else {next()}},beforeRouteLeave(to, from, next) {if (to.path === '/evaluation/C') {from.meta.keepAlive = truenext()} else {from.meta.keepAlive = falsenext()}}
}

配置B页面路由时，加个meta，设置keepAlive: true。

前进刷新后退缓存及第一次缓存无效相关推荐

HTTP缓存机制--客户端缓存
HTTP缓存机制分为两种,客户端缓存和服务端缓存,本文主要对客户端缓存进行简单的分析. 服务端缓存服务端缓存又分为代理服务器缓存和反向代理服务器缓存(也叫网关缓存,比如 Nginx反向代理.S ...
前端面试——浏览器存储浏览器缓存（http缓存机制）
浏览器存储 cookie和session的区别 cookie数据存放在浏览器上,session存放在服务器上 cookie一般在客户端有大小限制,一般为4K,session没有限制,但是考虑到服务器性 ...
浏览器缓存和HTTP缓存协商
简单来说,浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中.缓存会根据进来的请求保存输出内容的副本.当下一个请求来到的时候,如果是相同的URL ...
浏览器缓存:强缓存和协商缓存
1. 强缓存,不向服务器发请求,直接从本地硬盘(from disk cache/from memory cache)或者内存中获取 2.协商缓存,向服务器发出验证,如果资源无更改,不重新返回资源内容, ...
你知道304吗？图解强缓存和协商缓存
http协议-常见状态码,请求方法,http头部,http缓存一.http状态码 1.引例阐述 2.状态码分类 3.常见状态码 4.关于协议和规范二.http 方法 1.传统的methods 2. ...
浏览器缓存——强缓存、协商缓存
目录浏览器缓存:强缓存.协商缓存 #强缓存 #协商缓存 #补充 #拓展浏览器缓存:强缓存.协商缓存区别:强缓存不向服务器发送请求,协商缓存会发送请求至服务器相同点:若命中,都直接从浏览器缓存加 ...
http缓存和浏览器缓存
一.前言前端缓存主要是分为HTTP缓存和浏览器缓存.其中HTTP缓存是在HTTP请求传输时用到的缓存,主要在服务器代码上设置:而浏览器缓存则主要由前端开发在前端js上进行设置. 缓存可以说是性能优化 ...
Http强缓存和协商缓存
文章目录一.缓存介绍 1.什么是缓存? 2.为什么需要缓存? 3.哪些资源可以被缓存?--静态资源(css.js.img) 二.强制缓存 1.定义: 2.设置强缓存的方式 Expires & ...
彻底明白http强缓存和协议缓存
我们整天和浏览器和打交道,应该都听过强缓存和协议缓存,强缓存和协商缓存(也有叫对比缓存)都是浏览器的缓存策略,需要先明确一点,既然是浏览器的缓存,缓存的数据都是存放于客户端的机子上的,只是根据优先级不 ...

前进刷新后退缓存及第一次缓存无效

前进刷新后退缓存及第一次缓存无效相关推荐

最新文章

热门文章