解决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 部分页面缓存,部分页面不缓存的问题!
相关文章:
解决vue 部分页面缓存,部分页面不缓存的问题
前端时间项目迭代,其中有个需求 在vue里面,有a.b.c三个页面,要达到的效果是从a页面进去b页面,b页面需要刷新,但若从b页面进入c页面了以后再回到b页面,b页面需要保留之前的值,不做刷新࿱…...
修完这个 Bug 后,MySQL 性能提升了 300%
最近 MySQL 官方在 8.0.35 上修复了一个 bug: 这个 bug 是由 Mark Callaghan 发现的。Mark 早年在 Google MySQL 团队,后来去了 Meta MySQL,也主导了 RocksDB 的开发。 Mark 在 #109595 的 bug report 给出了非常详细的复现步骤 在官方修复后…...
【C/PTA】数组进阶练习(二)
本文结合PTA专项练习带领读者掌握数组,刷题为主注释为辅,在代码中理解思路,其它不做过多叙述。 目录 7-1 字符串逆序7-2 字符串替换7-3 统计字符出现次数7-4 IP地址转换7-1 删除重复字符7-2 说反话-加强版7-3 数组-回文串7-4 数组-无聊的菇菇…...
Mysql MMM
MMM概述 MMM(Master-Master replication manager for MvSQL,MySQL主主复制管理器) 是一套支持双主故障切换和双主日常管理的脚本程序。 MMM 使用 Perl 语言开发,主要用来监控和管理MySQL Master-Master(双主)复制&…...
GDPU 数据结构 天码行空10
目录 数据结构实验十 树遍历应用一、【实验目的】二、【实验内容】三、【实验源代码】⭐ CPP版⭐ c语言版 四、实验结果 数据结构实验十 树遍历应用 一、【实验目的】 1、了解树的建立方法 2、掌握树与二叉树的转化及其遍历的基本方法 3、掌握递归二叉树遍历算法的应用 二、…...
CD36 ; + Lectin;
CD2 LIMP-2, LGP85 SR-BI, CD36; 清道夫受体蛋白CD36超家族的成员是 脂质代谢 和 先天免疫 的重要调节因子。它们识别正常和修饰的脂蛋白,以及与病原体相关的分子模式。 该家族由三个成员组成: SR-BI &am…...
Git 分支管理
目录 列出分支 删除分支 分支合并 合并冲突 几乎每一种版本控制系统都以某种形式支持分支,一个分支代表一条独立的开发线。 使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作。 Git 分支实际上是指向更改快照的指针。 有…...
Vue23全局事件总线
Vue2&3全局事件总线 Vue2全局事件总线 功能:可以解决所有组件之间通信传数据的问题原理:通过一个共享对象,将所有组件全部绑定到对象上,即可通过这个对象实现组件与组件之间的传递数据,而这个共享对象叫做全局事件…...
GEM5 Garnet DVFS / NoC DVFS教程:ruby.clk_domain ruby.voltage_domain
简介 gem5中的 NoC部分是Garnet实现的,但是Garnet并没有单独的时钟域,而是保持ruby一致,要做noc的DVFS,便是要改ruby的 改电压 #这里只是生成一个随便变量名,存一下值。改是和频率一起的 userssaved_voltage_domain…...
java命令 jmap 堆参数分析
jmap -heap pid 展示pid的整体堆信息 bash-4.4# jmap -heap 10 Attaching to process ID 10, please wait... Debugger attached successfully. Server compiler detected. JVM version is 25.172-b11using thread-local object allocation. Garbage-First (G1) GC with 8 th…...
OpenCV C++ 图像处理实战 ——《OCR字符识别》
OpenCV C++ 图像处理实战 ——《OCR字符识别》 一、结果演示二、tesseract库配置2.1下载编译三、OCR字符识别3.1 文本检测方式3.1.1 RIL_BLOCK3.1.2 RIL_PARA3.1.3 RIL_TEXTLINE3.1.4 RIL_WORD3.1.5 RIL_SYMBOL3.2 英文文本检测3.3 中英文本检测四、源码测试图像下载总结一、结…...
在MySQL中创建新的数据库,可以使用命令,也可以通过MySQL工作台
摘要:在本教程中,你将学习如何使用MySQL CREATE DATABASE语句在MySQL数据库服务器上创建新数据库。 MySQL CREATE DATABASE语句简介 要在MySQL中创建新数据库,可以使用CREATE DATABASE语句。以下说明了CREATE DATABASE语句的基本语法: CREATE DATABASE [IF NOT EXISTS] …...
2311rust到31版本更新
1.27.1稳定版 在此修补程序前,下例在编译器内部恐慌. fn main() {let a vec!["".to_string()];a.iter().enumerate().take_while(|(_, &t)| false).collect::<Vec<_>>(); }1.27.1拒绝上述代码,并显示以下错误消息: error[E0507]: cannot move ou…...
【Python百宝箱】视觉算法秀:Python图像处理舞台上的巅峰对决
前言 在数字化时代,图像处理技术已经成为科技和计算机领域中不可或缺的一部分。从医学影像到计算机视觉,图像处理为我们提供了无限的可能性。Python作为一种灵活而强大的编程语言,在图像处理领域表现出色,拥有丰富的库和工具。本…...
Flutter 中在单个屏幕上实现多个列表
今天,我将提供一个实际的示例,演示如何在单个页面上实现多个列表,这些列表可以水平排列、网格格式、垂直排列,甚至是这些常用布局的组合。 下面是要做的: 实现 让我们从创建一个包含产品所有属性的产品模型开始。 …...
YOLOv8 加持 MobileNetv3,目标检测新篇章
🗝️YOLOv8实战宝典--星级指南:从入门到精通,您不可错过的技巧 -- 聚焦于YOLO的 最新版本, 对颈部网络改进、添加局部注意力、增加检测头部,实测涨点 💡 深入浅出YOLOv8:我的专业笔记与技术总结 -- YOLOv8轻松上手, 适用技术小白,文章代码齐全,仅需 …...
.gitignore 文件——如何在 Git 中忽略文件和文件夹详细教程
文章目录 什么是 .gitignore 文件?.gitignore 文件是用来做什么的?如何创建一个 .gitignore 文件?在 .gitignore 文件中应包括什么?如何在 Git 中忽略一个文件和文件夹如何忽略以前提交的文件 什么是 .gitignore 文件?…...
【数据结构(二)】单链表(3)
文章目录 1. 链表介绍2. 单链表应用实例2.1. 顺序添加方式2.1.1. 思路分析2.1.2. 代码实现 2.2. 按照编号顺序添加方式2.2.1. 思路分析2.2.2. 代码实现 3. 单链表节点的修改3.1. 思路分析3.2. 代码实现 4. 单链表节点的删除4.1. 思路分析4.2. 代码实现 5. 单链表常见面试题5.1.…...
创新案例|云服务平台HashiCorp是如何构建开源社区实现B2B增长飞轮
社区文化是HashiCorp企业文化的重要组成部分。虽然众多公司声称自己是社区驱动,但实际付诸行动的很少。与众不同的是,HashiCorp从一开始就将社区视为战略方针的核心,这也影响和塑造了公司今天的发展方向。社区不仅是执行策略之一,…...
2024年软件测试面试必看系列,看完去面试你会感谢我的!!
朋友圈点赞的测试用例 功能测试 1点赞后是否显示结果 2.点赞后是否可以取消; 3.点赞取消后是否可以重复点赞; 4.共同好友点赞后,是否有消息提醒; 5.非共同好友点赞后,是否有消息提醒; 6.点击点赞人昵称,是否可以跳转到他/她的主页; 7.自己能…...
stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生,小白用户,想学习知识的 有点基础,想要通过项…...
处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的
修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
