【VUE】ruoyi框架自带页面可正常缓存，新页面缓存无效

最新推荐文章于 2025-09-08 00:43:03 发布
原创 最新推荐文章于 2025-09-08 00:43:03 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #缓存 #ruoyi

使用Ruoyi框架开发时，自带页面可正常缓存，新页面缓存无效。原因是页面与getRouters接口中的名称不一致。文中给出两种解决办法，一是设置页面name时，需设置特定路由path；二是另一种设置页面name时，也需设置对应路由path。

ruoyi框架自带页面可正常缓存，新页面缓存无效

背景：

用若依框架进行开发时，发现ruoyi自带的页面缓存正常，而新开发的页面即使设置了缓存，当重新进入页面时依旧刷新了接口。

原因：页面name与 getRouters 接口中的path名称不一致

解决办法

第一种：当设置 页面 name: "DeviceType"时，需设置路由path为：“deviceType”

在这里插入图片描述

在这里插入图片描述

第二种：当设置 页面 name: "Devicetype"时，需设置路由path为：“devicetype”

在这里插入图片描述
在这里插入图片描述

zlting~
关注
若依ruoyi-vue前端页签缓存设置
程序员诚哥
04-24 5903
在路由配置中，为需要缓存的路由设置。
若依系统之如何简单粗暴解决同级路由缓存问题
weixin_70969322的博客
09-25 491
注意他的周期执行的时候还没有渲染好，所有不存在this.getList（）,只能使用。vm.getList（） 来调用。这样的，存在路由缓存。"不用点击就刷新啦"// 调用实例的方法。
若依框架前端切换TagView时刷新问题
luochengbang的专栏
02-04 1万+
改造若依框架点击tag切换时都是刷新问题。点击顶部tag切换时，永远都是刷新的。刷新问题两种情况：普通view切换时刷新及iFrame切换刷新
超强RuoYi性能优化：缓存策略与连接池配置技巧
最新发布
gitblog_00140的博客
09-08 1148
在高并发场景下，权限管理系统的性能往往成为业务瓶颈。作为基于SpringBoot的主流权限框架，RuoYi默认配置虽能满足基础需求，但在用户量突破10万+、日均请求超百万时，90%的开发者都会遭遇**数据库连接耗尽**、**重复查询拖垮服务器**等性能陷阱。本文将通过15个实战配置项、8组性能对比数据、5个核心代码优化点，带你构建支撑每秒3000+请求的高可用RuoYi系统。 读完本文你将掌握：...
【若依】框架页面缓存无效
wch19960518的博客
06-24 2596
使用若依框架开发过程中遇到的问题是：配置菜单时已经勾选了【是否缓存】这一项，但切换页面时未生效，但是框架中自带的页面是可以的。接口现象为：切回之前页面接口重新请求了。举个栗子：像在列表页面搜索当前数据跳到详情页面后，再回到列表页后搜索条件被清空，且列表数据也恢复到无搜索条件的状态了。
RuoYi(若依)平台页面缓存无效
热门推荐
qq_40015409的博客
07-16 1万+
最近使用若依的框架，配置菜单时，发现有一项【是否缓存】，配置了 之后，点击页面发现也没有达到缓存的效果，但是框架中自有的页面是可以的，就开始研究到底是哪里配置错了，直接上图： 1、想要实现的效果 2、我的操作： 在配置菜单缓存的一栏已经配置，发现效果不是预想的模样，就在想原因在什么地方？ 解决方法： 在思考之后，发现中间问题所在，有两种解决方案： 1、什么也不需要改，只需要遵守vue规范，vue中页面的name的命名为首字母大写，因此在我们配置菜单时，【路由地址】要与我...
若以（rouyi）框架勾选缓存不生效
weixin_63132926的博客
03-27 1336
这是因为在用户登录时，该用户下的所有信息都存在路由中，接口返回，在处理数据的过程中后台会处理匹配的路由名称（获取菜单配置路由地址后首字母转大写 ）所以需要给页面添加name，并且name要大写开头，否则会不生效。若以（ruoyi）框架中有缓存功能，在系统管理中的菜单管理里。谨以此纪录：若以（rouyi）框架勾选缓存不生效 问题。
若依系列RuoYi-Vue前后端分离版（127集，3.8.6）、RuoYi-Cloud微服务版本（142集，3.6.3）
08-01
ruoyi-vue: 127 3.8.6版本更新介绍.mp4 126 实现ehcache本地缓存.mp4 125 3.8.5版本更新介绍.mp4 124 实现多数据源增强.mp4 123 实现第三方授权登录.mp4 122 3.8.4版本更新介绍.mp4 121 3.8.3版本更新介绍.mp4 120 ...
【Ruoyi 解密 - 07. 前后端分离】：Vue2 与 Vue3 版本该如何抉择？
个人总结
08-28 1276
Ruoyi框架Vue2与Vue3选型指南 核心结论 新项目/团队无历史包袱：直接选Vue3 + RuoYi-Vue3，长期收益更高 现有Vue2项目：先用Vue2 + RuoYi-Vue2，后续渐进式迁移 新人学习：从Vue3开始，与最新技术生态同步 关键差异 Vue2基于Options API+Vue CLI，Vue3采用Composition API+Vite Vue3性能优势显著：冷启动快10倍+，Tree-Shaking减少40%体积 Vue3生态更活跃：Element-Plus、Pinia等
【ruoyi-vue】前后端分离项目分析
weixin_44823875的博客
02-07 1357
RuoYi-Vue 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring Security、MyBatis、Jwt、Vue），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。（1）说明使用原生的@Validated进行参数校验时，都是特定的注解去校验（例如字段长度、大小、不为空等），我们也可以用自定义的注解去进行校验，例如项目中的@Xss注解。
vue项目发版，缓存问题。
j1043438486的专栏
04-12 5357
在vue项目开发中，一直有一个令人都疼的问题，就是缓存问题；每次发版完之后由于浏览器缓存机制，用户端不会实时获取新的项目页面，甚至有可能出现静态文件获取报404，之前的解决方案是告知用户手动清理浏览器缓存，但是这种方式并不友好，因为用户未必知道怎么清理缓存，而且就算用户知道怎么清理缓存，也不清楚什么时候该清理。所以针对这种问题，推出了一种新的解决方案。 方案思路： 一. public/index.html配置meta，去掉缓存 二. 打包，在此过程中做了一下几件事情： 1.生成一个随机版本号..
ruoyi框架完成分库分表，按月自动建表功能
jifashihan的博客
11-22 1924
这里有个大坑，MASTER_URL，MASTER_USERNAME，MASTER_PASSWORD这几个值，用@Value赋值是没有问题的，有问题的是，切换了数据源，这几个值就变成了null，导致后续没办法进行，我现在还没找到办法，只能写死了。因为我是在历史表里按照时间time分表，只有按time查询，才会建表，所以我就在这个类中，查询了一下，这个也是个坑，因为写好代码了，竟然没分表，原因就是没有去查询，走不到建表策略那。
若依框架vue三级及以上菜单keep-alive缓存失效问题
qq_52065282的博客
08-01 3802
在若依框架中配置正确且页面写了name='Home'进行缓存，依然无法生效。打开三级及以上菜单后再次点击时缓存，不请求接口增强用户体验。
RuoYi-Vue 页面组件不缓存的问题
weixin_43642894的博客
05-17 2832
若依前后端分离框架，在使用菜单添加页面后设置了页面缓存，单页面没有被缓存。
若依框架页签缓存无效问题解决
ht9159的博客
05-11 1027
给页面添加缓存，首先组件名字要和路由名字要相同。其次最重要问题，框架的APPMain问题。需去掉transition和div标签就可以啦。
【若依】页面缓存
alikami的博客
08-09 1249
之前因为在同一个页面里面，需要用两个 script，而其中有个没有加 name ，导致一直缓存不成功，在此记录一下。
vue路由配置
coding
08-12 1783
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) /** * Note: 路由配置项 * * hidden: true // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1 * alwaysShow: true // 当你一个路由下面的 children 声明的路由大于1个时，自动.
VUE3 使用KeepAlive组件缓存 不生效问题
qq_45048851的博客
10-19 1175
使用 setup语法 时 版本3.2.34 或以上 那么你的文件名 就是 你的组件name。例如 A.vue 那么 组件的name属性就是A。1.首先 官网说明了。
若依框架-已经设置了缓存的页面，在特定情境下清除缓存【拿到路由上的参数进行判断是否清除缓存刷新】
ating_ing的博客
10-26 2714
若依框架-已经设置了缓存的页面，在特定情境下清除缓存【拿到路由上的参数进行判断是否清除缓存刷新】
vue3 若依页面缓存不生效
03-20
### Vue3 若依框架中页面缓存不生效解决方案 在 Vue3 中，`keep-alive` 是一种常用的机制来实现页面缓存功能。然而，在若依（RuoYi）框架下可能会遇到页面缓存失效的情况。以下是针对此问题的具体分析和解决方案。 #### 一、原因分析 1. **组件 `name` 属性错误** Vue 的 `keep-alive` 组件通过组件的 `name` 来匹配需要缓存的内容。如果组件未定义 `name` 或者其值不符合预期，则可能导致缓存无法正常工作[^1]。 2. **Vue 版本兼容性** 对于 Vue 3.2.34+ 的版本，默认情况下可以省略显式的 `name` 声明；但对于更早的版本，必须手动设置组件的 `name` 属性。 3. **Redis 缓存影响** 在若依框架中，字典数据通常存储在 Redis 中。如果修改了字典数据但未及时清除 Redis 缓存，前端可能仍然加载旧的数据[^2]。 4. **路由配置问题** 若依框架中的路由信息会在用户登录时初始化并缓存到内存中。如果动态更新了某些菜单或权限配置，而这些更改未被重新加载至路由表中，则可能导致缓存逻辑异常[^4]。 --- #### 二、具体解决方案 ##### 方法一：确认组件 `name` 是否正确 - 检查当前使用的 Vue 版本号。如果是低于 3.2.34 的版本，需确保每个需要缓存的组件都有明确的 `name` 属性。 ```javascript export default { name: 'YourComponentName', // 设置正确的组件名 components: { ... } }; ``` - 如果是 Vue 3.2.34+ 的版本，可以直接移除 `name` 属性声明，让 Vue 自动推断组件名称。 ##### 方法二：调试 `include/exclude` 配置 - 确认 `keep-alive` 的 `include` 和 `exclude` 列表是否包含目标组件的 `name`。 ```html <keep-alive include="YourComponentName"> <router-view /> </keep-alive> ``` - 使用动态绑定的方式指定要缓存的组件列表： ```javascript computed: { cachedViews() { return ['HomeView', 'AboutView']; // 替换为目标组件的名字数组 } }, template: ` <keep-alive :include="cachedViews"> <router-view></router-view> </keep-alive> ` ``` ##### 方法三：清理 Redis 缓存 - 当发现字典数据或其他全局配置发生变更但仍显示旧数据时，应考虑是否存在 Redis 缓存的影响。 - 登录后台管理系统，找到对应的缓存管理模块，执行清空操作。 ```bash redis-cli flushall ``` - 或者编写脚本来批量清除特定前缀的键值对： ```java @Autowired private RedisTemplate<String, Object> redisTemplate; public void clearDictCache(String prefix) { Set<String> keys = redisTemplate.keys(prefix + "*"); if (keys != null && !keys.isEmpty()) { redisTemplate.delete(keys); } } ``` ##### 方法四：刷新路由配置 - 修改菜单或权限后，建议强制刷新用户的路由信息以同步最新的变化。 - 调用接口重新拉取最新路由结构，并替换掉原有的静态路由对象。 ```typescript import router from '@/router'; function updateRoutes(newRoutes) { const currentRoutes = [...router.options.routes]; newRoutes.forEach(route => { if (!currentRoutes.find(r => r.path === route.path)) { router.addRoute(route); // 动态添加新路由 } }); } async function fetchAndApplyNewRoutes() { try { const res = await api.getLatestMenuConfig(); // 获取服务端的新路由配置 updateRoutes(res.data); } catch (error) { console.error('Failed to refresh routes:', error.message); } } ``` --- #### 三、注意事项 - 在开发阶段推荐开启 HMR（热重载），以便实时观察调整后的效果。 - 生产环境中务必测试不同场景下的行为一致性，防止因环境差异引发新的 bug。 - 定期维护 Redis 数据库，避免冗余记录占用过多资源。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值