当前位置: 首页 > news >正文

解决vue 部分页面缓存,部分页面不缓存的问题

前端时间项目迭代,其中有个需求 在vue里面,有a.b.c三个页面,要达到的效果是从a页面进去b页面,b页面需要刷新,但若从b页面进入c页面了以后再回到b页面,b页面需要保留之前的值,不做刷新;

第一想到的是:<router-view v-if="$route.meta.keepAlive"></router-view> ;但是由于v-if 每次会销毁页面元素,导致第一次是缓存不成功的;在网上也找到过window.reload();这种方法,但是页面会有一瞬间的空白,用户体验不是很好; 最后找了一种方法,vuex结合路由守卫可以达到此效果,具体代码如下:

首先app.vue

//jscomputed: {keepAlive () {return this.$store.getters.keepAlive}},//html
<keep-alive  :include='keepAlive'><router-view></router-view>
</keep-alive>
vuex 中需要定义keepAliveimport Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)var store = new Vuex.Store({// 定义状态state: {keekAlives:[],},mutations:{  //更改 Vuex 的 store 中的状态SET_KEEP_ALIVE:function(state, keekAlives){return state.keekAlives = keekAlives;}},getters: {keepAlive: function(state){return state.keekAlives//   keepAlive: state => state.keekAlives}}
})export default store
最后在需要缓存的页面进行判断beforeRouteEnter (to, from, next) {next(vm => {if (from.name=="serve") {vm.$store.commit('SET_KEEP_ALIVE', ['addProject'])}})},beforeRouteLeave (to, from, next) {if (to.name == "companySearch") {this.$store.commit('SET_KEEP_ALIVE', ['addProject'])} else if (to.name=="serve" || to.name=="addSuccess") {this.$store.commit('SET_KEEP_ALIVE', []) }next()},

这样就实现了vue 部分页面缓存,部分页面不缓存的问题!
 

http://www.lryc.cn/news/235849.html

相关文章:

  • 修完这个 Bug 后,MySQL 性能提升了 300%
  • 【C/PTA】数组进阶练习(二)
  • Mysql MMM
  • GDPU 数据结构 天码行空10
  • CD36 ; + Lectin;
  • Git 分支管理
  • Vue23全局事件总线
  • GEM5 Garnet DVFS / NoC DVFS教程:ruby.clk_domain ruby.voltage_domain
  • java命令 jmap 堆参数分析
  • OpenCV C++ 图像处理实战 ——《OCR字符识别》
  • 在MySQL中创建新的数据库,可以使用命令,也可以通过MySQL工作台
  • 2311rust到31版本更新
  • 【Python百宝箱】视觉算法秀:Python图像处理舞台上的巅峰对决
  • Flutter 中在单个屏幕上实现多个列表
  • YOLOv8 加持 MobileNetv3,目标检测新篇章
  • .gitignore 文件——如何在 Git 中忽略文件和文件夹详细教程
  • 【数据结构(二)】单链表(3)
  • 创新案例|云服务平台HashiCorp是如何构建开源社区实现B2B增长飞轮
  • 2024年软件测试面试必看系列,看完去面试你会感谢我的!!
  • 01ctfer 文件上传
  • 2.2 调用星火大模型的API
  • 云原生是整个信息化行业的未来,一文彻底搞懂云原生
  • 【Redis】RedisTemplate最全的常用方法
  • 图像倾斜角度求取-Radon变换
  • 如何在本地搭建Oracle数据库实现公网环境下通过PLSQL工具进行远程访问
  • 时序预测 | Python实现ConvLSTM卷积长短期记忆神经网络股票价格预测(Conv1D-LSTM)
  • qtpdfium的编译及读取pdf文件和一些简单操作
  • ClickHouse查看执行计划
  • 2023-11-17 VsCode使用makefile进行多文件编译
  • Network(四)NAT实现方式与VRRP概述