vue router keep-alive 保证回退页面不刷新
Author:zhoulujun Date:
keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM;
keep-alive 的props
include - 字符串或正则表达,只有匹配的组件会被缓存
exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
缓存组件
<keep-alive> <component include="a" exclude="b"> <!-- name 为 a 的组件将被缓存!,name 为 b 的组件不被缓存! --> </component> </keep-alive>
缓存路由
<keep-alive include="a"> <router-view> <!-- 只有路径匹配到的视图 a 组件会被缓存! --> </router-view> </keep-alive>
推荐用法:不需要例举出需要被缓存组件名称
<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件,比如 Home! --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!-- 这里是不被缓存的视图组件,比如 Edit! --> </router-view>
但是,他们也阻挡了vue 正常的生命周期流程。
vue的生命周期有:beforeCreate,created,beforeMonted,mounted.beforUpdate,update,beforDestroy,destroyed,详情参看《vue2.x入坑总结—回顾对比angularJS/React》
当在这些组件之间切换的时候都会请求一些请求过的数据,每次请求都会导致重复渲染影响性能。这些数据可以存到缓存。此时使用keep-alive将组建包裹起来。但这样以上八种生命周期钩子将失效。
取而代之的时activate和deactivated
activate:是在被包裹组建被激活的状态下使用的生命周期钩子
deactivated:在被包裹组件停止使用时调用
理论上:当在项目中引入keep-alive的时候,
页面第一次进入,钩子函数的触发顺序created -> mounted -> activated,
退出时触发deactivated。
再次进入(前进或者后退)时,只触发activated。如果created或mounted中处理刷新页面,这个钩子没有被调用,无法刷新。
beforeRouteEnter 总会触发
不使用 keep-alive 时,
beforeRouteEnter --> created --> mounted --> destroyed
使用 keep-alive 时,
beforeRouteEnter --> created --> mounted --> activated --> deactivated
更多的坑,推荐看《Vue 爬坑之旅 -- keepAlive 与 vue-router 结合使用实现页面缓存及记住滚动位置功能的实现及几个需要注意的点》
keep-live需要注意的地方总结
先匹配被包含组件的 name 字段,如果 name 不可用,则匹配当前组件 components 配置中的注册名称。
不会在函数式组件中正常工作,因为它们没有缓存实例。
当匹配条件同时在 include 与 exclude 存在时,以 exclude 优先级最高(当前vue 2.4.2 version)。比如:包含于排除同时匹配到了组件A,那组件A不会被缓存。
包含在include中,但符合 exclude ,不会调用activated 和 deactivated。
参考文章:
vue学习---生命周期钩子activated,deactivated https://www.cnblogs.com/mengtong/p/10966955.html
vue 页面回退mounted函数不执行的问题及解决方法 https://www.cnblogs.com/candy-xia/p/11425357.html
深入理解vue-router之keep-alive https://www.jb51.net/article/122570.htm
官方:<keep-alive>组件缓存问题 #811 https://github.com/vuejs/vue-router/issues/811#issuecomment-353875880
转载本站文章《vue router keep-alive 保证回退页面不刷新》,
请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8236.html
延伸阅读:
- VueRouter和ReactRouter原理:$router与$route区别,见习React Router 4.0
- 数组循环v-model绑定报错You are binding v-model directly to
-
从vue-router报Unknown custom element:
看Vue.use&install - webpack4.x搭建vue工程,各种报错
- vue element-ui loading延迟出现loading效果—elementUI设置loading
- vue中methods/watch/computed对比分析,watch及computed原理挖掘
- 前端组件化:vue组件设计思想与遵从原则
- Vue中scoped原理以及带来的样式问题
- vue router warnging:Expected indentation of 10 spaces but found 12
- Slot:HTML5-template与vue-template的区别,Vue中template与slot异同
- vue.directive:vue自定义指令钩子函数——从源码解读
- Vue Router(0):params和query的区别+重定向参数转发+别名作用
- vue项目sass文件找不到css背景图片:weppack报路径出错
- Vue依赖注入:provide/inject
- 详解v-model:v-model双向绑定与Vue自定义组件设置
- vue源码 源码解读
- vue-loader与vue-cli webpack配置笔记:vue-config.js笔记 替换loader
- vue watch对象键值说明,immediate属性详解
- vue mixins混合使用Vue.extend()
- vue、react中key有何区别?循环渲染优化与Vue.delete删除
- vue编译原理(1):vue-loader浅析
- 梳理vue双向绑定的实现原理
- vue2.x入坑总结—回顾对比angularJS/React
- 单向数据流-从共享状态管理:flux/redux/vuex漫谈异步数据处理