关于vue keep-alive组件与activated和deactivated钩子函数的应用
2019-07-10 16:25
3075 查看
1、通过keep-alive和router-view实现路由缓存,具体代码如下:
在app.vue:
<router-view v-if="!$route.meta.keepAlive"/> <keep-alive> <router-view v-if="$route.meta.keepAlive"/> </keep-alive>
在路由文件中配置相关参数,来判断该路由是否需要缓存,当keepAlive存在并且值为true时,缓存该路由
{ path: 'dCustomerPage', name: '客户管理', component: dCustomerPage, meta:{ keepAlive: true, } },
2、关于activated钩子函数
首次进入该路由的页面时会触发created,mounted,activated等钩子函数,但使用this.router.go(−1)返回该路由的时候,不会触发created和mounted,只会触发activated。如果调用this.router.go(-1)返回该路由的时候,不会触发created和mounted,只会触发activated。如果调用this.router.go(−1)返回该路由的时候,不会触发created和mounted,只会触发activated。如果调用this.router.go(-1)返回该路由后希望手动刷新数据,可以在activated(){}中执行相关的请求,但首次进入或者f5刷新界面的时候会多次触发相关数据请求,可以用定时器解决或者类似锁的操作。
3、关于deactivated钩子函数
在离开该缓存路由后,该路由的组件并没有被销毁,如果需要销毁如定时器相关的操作可以在deactivated钩子函数中处理,类似于beforeDestroy钩子函数的调用
相关文章推荐
- vue组件keep-alive的应用及原理
- Vue2.0 keep-alive 后组件不使用缓存
- 内置组件 && vue中强大的缓存机制之keep-alive
- 详解关于Vue2.0路由开启keep-alive时需要注意的地方
- vue学习总结一:keep-alive用法及(activated,deactivated生命周期)
- vue自动缓存keep-alive当前页面数据,包括选择框里面选择的内容或者搜索框选好的内容,用vue的activated更新最新的数据,更新返回的页面数据
- Vue: keep-alive在项目中的应用
- vue 使某个组件不被 keep-alive 缓存的方法
- vue的学习总结:keep-alive用法以及activated,deactivated生命周期的讲解
- vue.js 2.x 能否设置某个组件不被keep-alive 的解决方案
- 详解vue组件的keep-alive
- vue-router 实现组件的缓存之 keep-alive
- vue 如何使某个组件不被 keep-alive 缓存
- Vue2.0 keep-alive 组件的最佳实践
- vue.js内置组件之keep-alive组件使用
- (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
- vue里如何主动销毁keep-alive缓存的组件
- 关于unity中Network组件的简单应用
- 为什么基于TCP的应用需要心跳包(TCP keep-alive原理分析)
- 利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件