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 相关文章推荐
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
Js四则运算函数代码
Jul 21 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
15分钟上手vue3.0(小结)
May 20 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 has encountered an Access Violation
2007/01/15 PHP
56.com视频采集接口程序(PHP)
2007/09/22 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP中“=&gt;
2019/03/01 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
Python list与NumPy array 区分详解
2019/11/06 Python
如何在python中写hive脚本
2019/11/08 Python
python range实例用法分享
2020/02/06 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
中专毕业个人的自荐信格式
2013/09/21 职场文书
卫校护理专业毕业生求职信
2013/11/26 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书