vue 如何使某个组件不被 keep-alive 缓存
来源:互联网 发布:手机淘宝有免费装修 编辑:程序博客网 时间:2024/05/17 04:12
提出问题
最近在做项目发现一个问题,当我使用了 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() }
阅读全文
0 0
- vue 如何使某个组件不被 keep-alive 缓存
- vue-router 实现组件的缓存之 keep-alive
- Vue keep-alive
- vue keep-alive生命周期
- vue解决使用webpack打包后keep-alive不生效
- vue-router 之 keep-alive
- Vue keep-alive实践总结
- vue keep-alive的作用
- vue,keep-alive的作用
- vue项目优化之通过keep-alive数据缓存(vue+webpack)
- 解决keep-alive缓存问题
- vue keep-alive 数据更新问题
- vue keep-alive 标签的实践方案
- vue keep-alive的简单使用
- 动态组件is和keep-alive
- (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
- KEEP ALIVE
- Keep-Alive
- jQuery实现json与序列化互换
- Moto Z 手机背后的工程师文化
- 如何打造个人技术影响力
- vue子组件获取父组件的内容(props属性)
- pomelo(八)中文文档首页
- vue 如何使某个组件不被 keep-alive 缓存
- JavaWeb之JavaBean
- 后台与前端的联系
- 【ubuntu】安装cudnn
- vim 快捷键记录
- (Linux)mysql设置数据库编码为utf-8方法以及遇到的一些问题
- Java 基本算法实现
- Bugku——cookie欺骗
- 陈越姥姥第一节数据结构课,printN