vue keep-alive 取消某个页面缓存问题
keep-alive
keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素
<keep-alive>
<loading></loading>
</keep-laive>
当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行
被包裹在keep-alive中的组件的状态将会被保留,例如我们将某个列表类组件内容滑动到第100条位置,那么我们在切换到一个组件后再次切换回到该组件,该组件的位置状态依旧会保持在第100条列表处
关于这一点也是仁者见仁,有的产品可能会要求在每一次进入一个组件时页面的初始位置都是保持在顶部的,这里可以利用Vue中的滚动行为,但是前提是你是HTML5 history模式
我们在创建一个router实例的时候,可以提供一个scrollBehavior方法,该方法会在用户切换路由时触发
const router=new VueRouter({
routes:[
{
path:"/",
component:Home
}
],
scrollBehavior(to,form,savedPosition){
//scrollBehavior方法接收to,form路由对象
//第三个参数savedPosition当且仅当在浏览器前进后退按钮触发时才可用
//该方法会返回滚动位置的对象信息,如果返回false,或者是一个空的对象,那么不会发生滚动
//我们可以在该方法中设置返回值来指定页面的滚动位置,例如:
return {x:0,y:0}
//表示在用户切换路由时让是所有页面都返回到顶部位置
//如果返回savedPosition,那么在点击后退按钮时就会表现的像原生浏览器一样,返回的页面会滚动过到之前按钮点击跳转的位置,大概写法如下:
if(savedPosition){
return savedPosition
}else{
return {x:0,y:0}
}
//如果想要模拟滚动到锚点的行为:
if(to.hash){
return {
selector:to.hash
}
}
}
})
还有一个方法就是利用我们上面说过的,在keep-alive激活会触发activated钩子函数,那么在该函数内设置scrollTop为0
被keep-alive包裹的动态组件或router-view会缓存不活动的实例,再次被调用这些被缓存的实例会被再次复用,对于我们的某些不是需要实时更新的页面来说大大减少了性能上的消耗,不需要再次发送HTTP请求,但是同样也存在一个问题就是被keep-alive包裹的组件我们请求获取的数据不会再重新渲染页面,这也就出现了例如我们使用动态路由做匹配的话页面只会保持第一次请求数据的渲染结果,所以需要我们在特定的情况下强制刷新某些组件
利用include、exclude属性
<keep-alive include="bookLists,bookLists">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
<router-view></router-view>
</keep-alive>
include属性表示只有name属性为bookLists,bookLists的组件会被缓存,(注意是组件的名字,不是路由的名字)其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存,其它组件都会被缓存
利用meta属性
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被缓存的组件
}
]
<keep-alive>
<router-view v-if="this.$route.meat.keepAlive"></router-view>
<!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->
官方提出的解决方案响应路由参数的变化
利用berforeRouteEnter实现前进刷新,后退缓存资料
利用第三方插件实现前进刷新,后退不缓存
作者:羊烊羴
链接:https://www.jianshu.com/p/4b55d312d297
vue keep-alive 取消某个页面缓存问题的更多相关文章
- vue中keep-alive,include的指定页面缓存问题
做vue项目时,有时要在某些页面做缓存,而其它页面不要.比如:A:首页,B:获取所有订单页面,C:订单详情页面:从A(首页)进入 B(获取所有订单)时应该不缓存,B(所有订单)进入 C(订单详情)订单 ...
- Vue 之keep-alive的使用,实现页面缓存
什么是keep-alive 有时候我们不希望组件被重新渲染影响使用体验: 或者处于性能考虑,避免多次重复渲染降低性能.而是希望组件可以缓存下来,维持当前的状态.这时候就需要用到keep-alive组件 ...
- varnish页面缓存服务
varnish页面缓存服务 https://www.cnblogs.com/L-dongf/p/9310144.html http://blog.51cto.com/xinzong/1782669 阅 ...
- Nginx特性验证-反向代理/负载均衡/页面缓存/URL重定向
原文发表于cu:2016-08-25 参考文档: Nginx 反向代理.负载均衡.页面缓存.URL重写等:http://freeloda.blog.51cto.com/2033581/1288553 ...
- vue服务端渲染浏览器端缓存(keep-alive)
在使用服务器端渲染时,除了服务端的接口缓存.页面缓存.组建缓存等,浏览器端也避免不了要使用缓存,减少页面的重绘. 这时候我们就会想到vue的keep-alive,接下来我们说一下keep-alive的 ...
- vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492 vue中,我们所要实现的一个场景就是: 1.搜索页面==&g ...
- vue项目实现详情页后退缓存之前的数据
vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员 阅读数:244 一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息 二.实 ...
- 8种Vue中数据更新了但页面没有更新的情况
目录 1.Vue 无法检测实例被创建时不存在于 data 中的 属性 2. Vue 无法检测'对象属性'的添加或移除 3.Vue 不能检测利用数组索引直接修改一个数组项 4.Vue 不能监测直接修改数 ...
- 探索ASP.NET MVC5系列之~~~5.缓存篇(页面缓存+二级缓存)
其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...
随机推荐
- openssl源代码结构
Openssl整个软件包主要包括三个主要的功能模块:密码算法库,SSL协议库,应用程序: 应用程序:主要包括密钥生成,证书管理,格式转换,数据加密,签名,SSL测试等. evp,对称算法,非对称算法, ...
- highcharts 大数据 String+,StringBuilder,String.format运行效率比较
实现String字符串相加的方法有很多,常见的有直接相加,StringBuilder.append和String.format,这三者的运行效率是有差异的,String是final类型的,每次相加都会 ...
- 2018-2019-2 20165215《网络对抗技术》Exp4 恶意代码分析
目录 实践目标 实践内容 基础问题回答 实验步骤 使用schtasks指令监控系统 使用sysmon工具监控系统 使用VirusTotal分析恶意软件 使用PEiD进行外壳检测 使用PE explor ...
- rpm包与 yum 安装与卸载
rpm包的安装: 1.安装一个包 # rpm -ivh 2.升级一个包 # rpm -Uvh 3.移走一个包 # rpm -e 4.安装参数 --force 即使覆盖属于其它包的文件也强迫安 ...
- hdu2054 通过率低是有理由的
这虽然是一道水题,但却巨坑,他题面上不说数据范围,也没有说数据类型,事实就是数据范围巨大,整型实型都有,所以必须用字符串去写,但是又涉及到小数,所以还要删除小数后面多余的0,比如1==1.0000,这 ...
- Configuring VNC Server on Linux
linux安装oracle时,需用图形化界面安装.所以可采取下列的工具辅助安装 sysvinit (Original Method) systemd (New Method) VNC Clients ...
- kubernets event 分析
1. event 是一个很重要的组成部分 event 分析 Kubernetes(K8s)Events介绍(上) Kubernetes Events介绍(中) Kubernetes Events介绍( ...
- 动态 DP 学习笔记
不得不承认,去年提高组 D2T3 对动态 DP 起到了良好的普及效果. 动态 DP 主要用于解决一类问题.这类问题一般原本都是较为简单的树上 DP 问题,但是被套上了丧心病狂的修改点权的操作.举个例子 ...
- vue安装之后的报错处理---chromedriver@2.35.0 install: `node install.js`
报错:chromedriver@2.35.0 install: `node install.js` 这个错误的解决方法就是在你创建的项目目录,比如你创建的项目叫myVue,然后你就要在myVue这个目 ...
- C# 在类中使用Timer定时器以及延时处理的方法
我们平时在C#中要用到定时功能时,有自带定时器,一般在定时器里面写函数就行了,现在需要在类里面写了一个定时器,不和界面绑定,一开始的时候感觉没什么思路,然后看了一下界面的设计代码,有了思路,还是很简单 ...