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 相关文章推荐
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
js分页代码分享
Apr 28 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 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
人族 TERRAN 概述
2020/03/14 星际争霸
php 中的4种标记风格介绍
2012/05/10 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
热点新闻滚动特效的js代码
2013/08/17 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
Python转换时间的图文方法
2019/07/01 Python
详解Python self 参数
2019/08/30 Python
python批量处理文件或文件夹
2020/07/28 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
高中生毕业自我鉴定范文
2013/12/22 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
基层党员公开承诺书
2014/05/29 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
工程移交协议书
2016/03/24 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS