缓存id路由页面返回,历史路由栈

功能需求

网页端需要做页面数据缓存(vue动态路由数据缓存),可根据id值打开多个编辑详情页,需要在页面操作返回时关闭面包屑页签

隐藏问题

1.页面缓存会有初始化和组件激活访问生命周期调用数据接口过多,有性能损耗

2.使用this.$router.back()返回是返回上一个历史路由,如果打开多个id详情页,并反复在两个详情页做切换操作,会导致在操作返回时看起来像是在详情页反复切换数据关闭不了,如下图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

解决

1.缓存页组件初始化(created)和组件激活访问(activated)生命周期只执行一次,使用变量状态,在进入方法时判断变量是否return,在接口完成(finally)更改变量

2.路由历史栈,在路由守卫router.beforeEachstore存储from历史路由,在标题组件返回方法里,对历史路由栈数据进行操作,获取历史有效路由使用this.$router.replace跳转

//在面包屑页签组件初始化时调用addTags方法存储访问路由
addTags() {const { name } = this.$routeif (name) {this.$store.dispatch('tagsView/addView', this.$route)}
},//在权限管理路由守卫里存储历史访问路由
import store from './store'
router.beforeEach(async (to, from, next) => {...store.commit('tagsView/ADD_ROUTER_HISTORY', from.path);...
}

tagsView.js文件
在这里插入图片描述

const state = {visitedViews: [],cachedViews: [],routeHistory: [],closedRoutes: [],validHistory:[],lastValidRoute:''
}
const mutations = {ADD_ROUTER_HISTORY: (state, path) => {state.routeHistory.push(path);},CLOSE_ROUTER(state, route) {state.closedRoutes.push(route);// 生成过滤后的有效历史栈state.validHistory = state.routeHistory.filter(item => !state.closedRoutes.includes(item))if (state.cachedViews.length===0) {//首页state.lastValidRoute = '/'  }else{//历史有效路由state.lastValidRoute = state.validHistory[state.validHistory.length - 1];  }},ADD_VISITED_VIEW: (state, view) => {if (state.visitedViews.some(v => v.path === view.path)) returnstate.visitedViews.push(Object.assign({}, view, {title: view.meta.title || 'no-name'}))},ADD_CACHED_VIEW: (state, view) => {if (state.cachedViews.includes(view.name)) returnif (!view.meta.noCache) {state.cachedViews.push(view.name)}console.log(state.cachedViews)}
}
const actions = {addView({ dispatch }, view) {dispatch('addVisitedView', view)dispatch('addCachedView', view)},addVisitedView({ commit }, view) {commit('ADD_VISITED_VIEW', view)},addCachedView({ commit }, view) {commit('ADD_CACHED_VIEW', view)},delView({ dispatch, state }, view) {return new Promise(resolve => {dispatch('delVisitedView', view)dispatch('delCachedView', view)resolve({visitedViews: [...state.visitedViews],cachedViews: [...state.cachedViews],})})},delVisitedView({ commit, state }, view) {return new Promise(resolve => {commit('DEL_VISITED_VIEW', view)resolve([...state.visitedViews])})},delCachedView({ commit, state }, view) {return new Promise(resolve => {commit('DEL_CACHED_VIEW', view)resolve([...state.cachedViews])})}
}
export default {namespaced: true,state,mutations,actions
}

标题组件layout-header.vue文件返回方法里应用

<template><div class="layout-header"><div class="back" v-if="back" @click="handleBack"><img src="@/assets/images/back-icon.png"/></div><div class="layout-title" :style="'font-size:' + fontSize + 'px' ">{{title}}</div><slot></slot></div>
</template>
<script>
export default {props: {title: {type: String,default: ""},back: {type: Boolean,default: false},fontSize: {type: Number,default: 18}},data() {return {}},methods: {handleBack(){let path = this.$route.path//存入当前路由this.$store.commit('tagsView/ADD_ROUTER_HISTORY', path);const visitedViews=this.$store.state.tagsView.visitedViewslet view = visitedViews.find(v => v.path === path)//计算路由历史栈及访问路由this.$store.commit('tagsView/CLOSE_ROUTER', path);this.$store.dispatch('tagsView/delView', view)// 获取最近有效路由并跳转const target = this.$store.state.tagsView.lastValidRoutethis.$router.replace(`${target}`);}}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/33864.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mingw工具源码编译

ming-w64 mingw编译生成的库&#xff0c;需要mingw的lib文件支持。 https://github.com/mingw-w64/mingw-w64 使用msys2的bash git checkout v8.0.3 ./configure --disable-dependency-tracking --targetx86_64-w64-mingw32 mingw32-make.exe -j4 修改makefile中的make 改成mi…

使用OpenCV和MediaPipe库——抽烟检测(姿态监控)

目录 抽烟检测的运用 1. 安全监控 (1) 公共场所禁烟监管 (2) 工业安全 2. 智能城市与执法 (1) 城市违章吸烟检测 (2) 无人值守管理 3. 健康管理与医疗 (1) 吸烟习惯分析 (2) 远程监护 4. AI 监控与商业分析 (1) 保险行业 (2) 商场营销 5. 技术实现 (1) 计算机视…

大数据学习(66)- CDH管理平台

&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一…

Python字符串高效优化策略:特定编码 -> Unicode码点 -> UTF-8(可自定义)

Python利用唯一uni-pot中介打理&#xff0c;任意制式输出&#xff08;首选uyf-8&#xff09;。 笔记模板由python脚本于2025-03-14 23:37:04创建&#xff0c;本篇笔记适合喜欢探究字符串编码细节的coder翻阅。 【学习的细节是欢悦的历程】 博客的核心价值&#xff1a;在于输出思…

Linux自动化构建工具—make/makeflie

目录 1、为什么我们需要make和makefile 2、makefile文件的基本语法 makefile文件的语法和make指令的用法 定义变量 3、PHONY关键字 .PHONY 的语法 为什么需要.PHONY&#xff1f; 1、为什么我们需要make和makefile make 和 Makefile 是软件开发中用于自动化构建和管理代…

使用DeepSeek完成一个简单嵌入式开发

开启DeepSeek对话 请帮我使用Altium Designer设计原理图、PCB&#xff0c;使用keil完成代码编写&#xff1b;要求&#xff1a;使用stm32F103RCT6为主控芯片&#xff0c;控制3个流水灯的原理图 这里需要注意&#xff0c;每次DeepSeek的回答都不太一样。 DeepSeek回答 以下是使…

OSPF-2 邻接建立关系

上一期我们说了OSPF的邻居建立关系以及OSPF邻居关系建立中建立失败的因素以及相关实验案例 这一期我们来说说OSPF的邻接关系建立时需要交互哪些报文以及失败因素及原因和相关实验案例 一、概述 在运行了OSPF的网络当中为了交互链路状态信息和路由信息,互相之间需要建立邻接关…

app.config.globalProperties

目录 一:基础使用 1、简介 2、使用 3、打印结果: 二:封装 1、创建一个.ts文件(utils/msg.ts) 2、在main.ts中全局注册 3、在页面中使用 4、打印结果 一:基础使用 1、简介 app.config.globalProperties 是 Vue 3 应用实例&#xff08;app&#xff09;的一个配置属性&…

初探大模型开发:使用 LangChain 和 DeepSeek 构建简单 Demo

最近&#xff0c;我开始接触大模型开发&#xff0c;并尝试使用 LangChain 和 DeepSeek 构建了一个简单的 Demo。通过这个 Demo&#xff0c;我不仅加深了对大模型的理解&#xff0c;还体验到了 LangChain 和 DeepSeek 的强大功能。下面&#xff0c;我将分享我的开发过程以及一些…

基于RWA 与 AI-Agent 协同的企业数字化生态构建

在当前数字经济高速发展的背景下&#xff0c;企业数字化转型已成为提升竞争力和创新能力的必由之路。以实体零售与文旅行业为代表的传统产业&#xff0c;正通过现实世界资产&#xff08;RWA&#xff09;数字化与人工智能代理&#xff08;AI-Agent&#xff09;的协同应用&#x…

专题地图的立体表达-基于QGIS和PPT的“千层饼”视图制作实践

目录 前言 一、QGIS准备基础数据 1、QGIS 相关插件 2、图层标绘操作 二、PPT中制作 1、调整图片的规格 2、设置旋转 3、添加文字 三、总结 前言 在信息爆炸的时代&#xff0c;数据的可视化呈现变得愈发关键&#xff0c;而专题地图作为传递地理空间信息的有力工具&#…

3D文物线上展览如何实现?

3D文物线上展览的实现主要依赖于一系列先进的数字技术和创新手段&#xff0c;以下是实现3D文物线上展览的关键步骤和技术要点&#xff1a; 一、文物数字化采集与建模 高精度扫描&#xff1a; 使用专业的3D扫描仪对文物进行高精度扫描&#xff0c;获取文物的三维数据。积木易…

SpringCloud 学习笔记1(Spring概述、工程搭建、注册中心、负载均衡、 SpringCloud LoadBalancer)

文章目录 SpringCloudSpringCloud 概述集群和分布式集群和分布式的区别和联系 微服务什么是微服务&#xff1f;分布式架构和微服务架构的区别微服务的优缺点&#xff1f;拆分微服务原则 什么是 SpringCloud &#xff1f;核心功能与组件 工程搭建父项目的 pom 文件 注册中心Rest…

1140:验证子串--next.data()、KMP和find

1140&#xff1a;验证子串--KMP 题目 解析next.data()KMP代码Find代码 题目 解析 对于字符串的匹配常见的KMP算法【面试常考】 KMP中需要注意的是&#xff1a;应该从下标1开始遍历&#xff0c;因为下标0前面无值&#xff0c;不能匹配next 固在循环外应初始next[0]0;//易忘点 …

Python 实现大文件的高并发下载

项目背景 基于一个 scrapy-redis 搭建的分布式系统&#xff0c;所有item都通过重写 pipeline 存储到 redis 的 list 中。这里我通过代码演示如何基于线程池 协程实现对 item 的中文件下载。 Item 结构 目的是为了下载 item 中 attachments 保存的附件内容。 {"crawl_tim…

ubuntu中用docker下载opengauss

1.安装docker sudo apt install docker.io2.拉取opengauss镜像 sudo docker pull enmotech/opengauss3.创建容器 sudo docker run --name opengauss --privilegedtrue -d -e GS_PASSWORDEnmo123 enmotech/opengauss:latest3.5.如果容器停止运行&#xff08;比如关机了&#…

从零基础到能独立设计单片机产品,一般需要经历哪些学习阶段?

相信很多人&#xff0c;内心都有“钢铁侠”的幻想&#xff0c;成为能写程序&#xff0c;能设计硬件&#xff0c;能设计结构&#xff0c;能焊接的全能型人才。 上次徐工问我&#xff0c;如果你财富自由了&#xff0c;想去做啥&#xff1f; 我说出来&#xff0c;可能大家都不信&a…

cursor中git提交记录出现 签出(已分离)

我当时在cursor中的git记录右键点击 签出(已分离) 就导致最左边的记录图标的颜色由蓝色变为了橙色 后面提交的记录都不在显示本地分支和远程分支 创建新分支&#xff1a;在您当前的分离HEAD状态下&#xff0c;创建一个新的分支来保存这些提交。 git checkout -b new-branch-nam…

软件测试之测试用例

1. 什么是测试用例 测试用例&#xff08;TestCase)是为了实施测试而向被测试的系统提供的一组集合&#xff0c;这组集合包含&#xff1a;测试环境、操作步骤、测试数据、预期结果等要素。 设计测试⽤例原则⼀&#xff1a; 测试⽤例中⼀个必需部分是对预期输出或结果进⾏定义 使…

Unity2D 井字棋

Unity版本2022.3 场景布置 其中可以通过给Board对象添加Grid Layout Group&#xff0c;然后设置每个子物体所占宽高快速排整齐。用完删掉。每个落子的方格ChessBox都是一个Button。 根据Board的宽高除以三即可。 然后隐藏按钮&#xff0c;通过设置alpha值实现。 将ChessBox的…