vue使用keep | 您所在的位置:网站首页 › 使用vue实现登录页面 › vue使用keep |
vue使用keep-alive后从部分页面进入不缓存示例详解
需求: 1:当前有页面A-B-C三个板块; 2:从页面C返回页面B时,B页面数据之前数据不会被清空(keep-alive),且C页面携带到B页面的数据缓存(event-bus/vuex); 3:从A-页面进入B页面时,B页面为初始化状态。 实现: 1:借用路由钩子函数,在进入B页面时,对当前页面进行兼容处理; 修改router路由中配置项 配置meta属性和isBack标识,判断当前页面是从C页面返回还是从其他页面进入,具体配置如下: { path: '/B', name: 'B', component: require('@/page/index.vue'), meta: { keepAlive: true, //当前页面是否缓存,搭配keep-alive使用 isBack: false // 判断当前页面是从C页面返回还是从其他页面进入,默认从A页面进入 } },判断当前页面是否需要缓存的页面 再B页面判断当前页面跳转方式,通过beforeRouteEnter(to, from, next),来判断路由是从哪里来跳转的,如果是从C跳转的,则将当前路由对象的meta.isBack设置为true,否则设为false。具体实现如下: beforeRouteEnter(to, from, next) { if (from.path == "/C") { to.meta.isBack = true; } else { to.meta.isBack = false; } next(); },不需要缓存页面,重置B页面数据 从非C页面进入B页面时,都应重置当前页面数据,所以需要在页面加载之前(即activated),将之前获取到的数据以及查询条件清空。activated()与deactivated()是两个生命周期钩子(生命周期函数)。activated()与deactivated()是路由组件所独有的两个生命周期钩子,用于捕获路由组件的激活状态。activated路由组件被激活时触发。deactivated路由组件失活时触发。 activated() { let that = this; // 第一次和非C页面进入B页面时 isBack都为false,即需要重置数据 if (!this.route.meta.isBack) { // 重置数据操作 } this.route.meta.isBack = false; },总结 关于vue使用keep-alive后从部分页面进入不缓存的文章就介绍至此,更多相关keep-alive部分页面进入不缓存内容请搜索编程宝库以前的文章,希望以后支持编程宝库! 下一节:vue-pdf插件实现pdf文档预览方式(自动分页预览)JS 编程技术vue-pdf插件的使用使用vue-pdf插件实现如下效果图: 实现功能1.多个pdf预览2.获取页码,每个pdf文档实现分页预览功能实现步骤如下: ... |
CopyRight 2018-2019 实验室设备网 版权所有 |