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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
解决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
thinkphp的c方法使用示例
2014/02/24 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
php限制ip地址范围的方法
2015/03/31 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
js创建对象的方式总结
2015/01/10 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
vue中引用阿里字体图标的方法
2018/02/10 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
python计算N天之后日期的方法
2015/03/31 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
解决Mac下使用python的坑
2019/08/13 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
django 读取图片到页面实例
2020/03/27 Python
浅析Python 多行匹配模式
2020/07/24 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
介绍一下Java中标识符的命名规则
2014/02/03 面试题
函授教育个人学习的自我评价
2013/12/31 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2015年度保密工作总结
2015/04/24 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书