vue 使某个组件不被 keep-alive 缓存的方法


Posted in Javascript onSeptember 21, 2018

提出问题

最近在做项目发现一个问题,当我使用了 keep-alive 标签后,进入了某个路由进行一系列操作,再点击浏览器后退,再次进入刚才的路由,页面被操作的数据没有初始化!

分析问题

这是因为 keep-alive 将路由页面缓存,所以该路由没有完成整个生命周期,没有 destroyed,因此重新进入也没有触发其他生命周期钩子,如 created 等。

解决问题

(1). 查看官方文档

当组件在 keep-alive 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

include - 字符串或正则表达式。只有匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
 <component :is="view"></component>
</keep-alive>

匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

(2). 监听路由变化

使用 watch 监听路由变化,但是我发现监听路由只有在组件被 keep-alive 包裹时才生效,未包裹时不生效,原因不明,理解的小伙伴请留言告诉我!

watch: {
 '$route' (to, from) {
   // 对路由变化作出响应...
  }
}

beforeRouteUpdate 这个钩子目前我发现还不能用,不知道哪里出错。

beforeRouteUpdate (to, from, next) {
  // react to route changes...
  // don't forget to call next()
 }

以上这篇vue 使某个组件不被 keep-alive 缓存的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
setAttribute 与 class冲突解决
Feb 17 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
微信小程序签到功能
Oct 31 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 #Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 #Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 #Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 #Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 #Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 #Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 #Javascript
You might like
多个PHP中文字符串截取函数
2013/11/12 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python实现二叉查找树实例代码
2018/02/08 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
大学生的应聘自我评价
2013/12/13 职场文书
《雷雨》教学反思
2014/02/20 职场文书
职称评定自我鉴定
2014/03/18 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
广播体操口号
2014/06/18 职场文书
迎国庆横幅标语
2014/10/08 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
前端JavaScript大管家 package.json
2021/11/02 Javascript