vue 使某个组件不被 keep-alive 缓存的方法
更新时间：2018年09月21日 11:00:44 作者：小皮咖
今天小编就为大家分享一篇vue 使某个组件不被 keep-alive 缓存的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
提出问题
最近在做项目发现一个问题，当我使用了 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 缓存的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了Vue和原生JS中如何使用自定义字体,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下2024-01-01
这篇文章主要为大家详细介绍了Vue.js路由实现选项卡简单实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码
这篇文章主要介绍了vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
本篇文章主要介绍了详解Vue单元测试Karma+Mocha学习笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要带大家从源码分析一下Vue3中的组件挂载的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下2023-09-09
这篇文章给大家介绍了Vue3监听store中数据变化的三种方法,使用watch和storeToRefs函数,使用计算属性computed和使用watchEffect函数这三种方法,文中通过代码讲解非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要给大家介绍了关于Vue如何在CSS中使用data定义的数据的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-05-05
vue2.0采用了虚拟DOM来代替对真实DOM的操作，最后通过某种机制来完成对真实DOM的更新，渲染视图。这篇文章主要介绍了vue2.0的虚拟DOM渲染,需要的朋友可以参考下2018-08-08
本篇文章主要介绍了如何快速入门Vue的方法，对0基础学习Vue的朋友会很有帮助，跟着小编一起来看下吧2016-12-12
laravel5.4+vue+element简单搭建的示例代码
本篇文章主要介绍了laravel5.4+vue+element简单搭建的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
最新评论