vue-element-admin设置了页面缓存但无效的原因

已于 2023-07-26 15:48:31 修改
阅读量1.9k 收藏
点赞数 3
文章标签： element-ui vueElementAdmin vue
于 2022-02-14 14:46:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_920227/article/details/122924331
版权

检查组件中的name与路由中的name是否一致，只有一致的情况下有缓存。

龙哥里格隆
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue admin element noCache设置无效的问题
10-16
今天小编就为大家分享一篇解决vue admin element noCache设置无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3 中使用 keep-alive 不生效的原因，及keep-alive使用详细介绍
前端打工人的博客
07-25 9154
keep-alive是vue提供的一个组件，它可以将组件缓存起来，避免在组件切换时，每次都重新渲染，从而提高页面性能和用户体验。因此，keepalive被广泛应用于一些需要频繁切换路由或组件的应用中。keep-alive是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
Springboot vue-element 快速开发，全开源,java 流程开发、前端后分离，小程序，适合入门及企业内部
03-21
Springboot vue-element 快速开发，全开源,java 流程开发、前端后分离，小程序，适合入门及企业内部 前端采用 vue-element-admin 。 后端采用 Spring Boot、MySQL + MyBatis Plus、Redis + Redisson。 权限认证使用 Spring Security & Token & Redis，支持多终端、多种用户的认证系统。 支持加载动态权限菜单，按钮级别权限控制，本地缓存提升性能。 支持 SaaS 多租户系统，可自定义每个租户的权限，提供透明化的多租户底层封装。 工作流使用 Activiti ，支持动态表单、在线设计流程、多种任务分配方式。 高效率开发，使用代码生成器可以一键生成前后端代码 + 单元测试 + Swagger 接口文档 + Validator 参数校验。 集成微信小程序、微信公众号、企业微信、钉钉等三方登陆，集成支付宝、微信等支付与退款。 集成阿里云、腾讯云、云片等短信渠道，集成阿里云、腾讯云、七牛云等云存储服务。 用户管理 用户是系统操作者，该功能主要完成系统用户配置 在线用户 当前系统中活跃
详解vue-template-admin三级路由无法缓存的解决方案
11-21
1. 为什么三级会缓存不了 在src/layout/AppMain组件: keep-alive的组件依赖cachedViews,cachedViews是store中的一个状态，cachedViews的逻辑在src/layout/TagView 当路由变更时就会调用addViewTags,addViewTag会根据匹配的路由name属性进行缓存。而用到三级路由的时候，拿到name只能时第三级路由的name，二级路由组件的名字会丢失，keep-alive就不会进行缓存。 知道原因之后，第一个想法就是把二级路由的name也加上去就好了。要实现这个也很简单，只需要获取到matched属性
go-admin:基于go + gin + vue + element admin后台管理系统，支持用户管理，认证，内容管理等
03-11
去管理员 go-admin是一个go语言开发的后台管理系统，该系统以角色为基础的权限管理设计（RBAC），完成了系统管理模块功能的开发（其他示例模块替代合并），采用前替代分离实现方式，服务端基于go开源gin框架，前端开源框架 。使用Swagger 2.0自动生成API文档。 设计原则 采用比较流行的开源框架 ， （这里下载的多语言版 ，不是master分支），这些项目维护和更新比较好。 尽量少修改vue-element-admin框架的代码，以便以后升级。 前一级分离，前一级可以独立开发互不影响。 服务端控制前端菜单显示以及相应权限。 系统环境 golang语言：go1.13.3 +， 数据库：mysql5.7 缓存：redis3.0 项目地址 github的： 编码云（国内）： 介绍 本项目相关源代码分析相关文章如下： 快速开始 1，克隆项目源代码 git clone https:
vue页面缓存失效问题解决
吴小迪的博客
06-09 1772
前端技术栈用的是vue，然后用keep-alive组件进行缓存页面【切换页面不进行刷新页面，保留之前的查询条件及状态等等】如果你不知道什么是正确的name的话可以在keep-alive那里把name显示的debug出来看。方案一：直接删除name的声明【一定是vue3.2.34+的版本才可以用这个方法】所以到这里基本上就排查到了问题应该就是组件的name错了所以导致缓存无效了。，如果是3.2.34+的版本就无需给组件声明name。方案二：将组件的name改成正确的。
解决Vue三级及以上路由无法缓存的问题
qq_40247817的博客
01-07 1825
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 解决Vue三级及以上路由无法缓存的问题前言一、代码参考 前言 在平时开发时，面对那种表单比较多的页面，我们来回切换时页面老是刷新，会导致没有保存的数据丢失，会很大影响用户体验感，这时候我们就需要对页面进行缓存，而当我们<keep-alive :include="cachedViews"> 中已经缓存来了这个路由组件，路由的名称和组件名称也一样，也设置了cache，但是我们发现页面就是不缓存，非常奇怪。 其实，当路由变更时就会调用
vue-element-plus-admin整合后端实战——实现系统登录、缓存用户数据、实现动态路由
热门推荐
学海无涯，行者无疆
03-27 1万+
整合vue-element-plus-admin前端框架，作为开发平台的前端。介绍如何对vue-element-plus-admin改造，实现系统登录、缓存用户数据以及动态路由。
vue3-element-admin（标签页缓存）
weixin_43400431的博客
06-14 1798
admin的标签页缓存以及设置 网址：vue3-element-admin
iview 无法缓存的问题
weixin_30950607的博客
09-05 342
转载于:https://www.cnblogs.com/web-zqk/p/9593683.html
详解vue之页面缓存问题(基于2.0)
08-31
本篇文章主要介绍了vue之页面缓存问题(基于2.0)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3中keep-alive缓存,指向同一组件时数据不更新
weixin_50880237的博客
12-05 951
vue3中keep-alive缓存,指向同一组件时数据不更新
Vue3中keep-alive路由缓存不生效
最新发布
m0_58440770的博客
08-23 757
vue3 keep-alive路由缓存注意点
vue-element-template增加多标签页tagsview
FellAsleep的博客
07-11 1405
vue-element-template增加多标签页tagsview 最后如果你要固定住tagsView,那么这里你需要设置下。
若依添加界面缓存没生效
ajiejie66的博客
07-01 981
页面name首字母要大写，只要一个大写
Vue的路由/页面缓存及子组件刷新问题
oneclarence的专栏
07-01 3417
文章目录需求说明分析及解决路由缓存页面组件刷新 需求说明 1、部分路由需要做缓存 2、单页面中部分组件需要重新渲染，比如：对表格进行新增、删除、修改等之后需要刷新页面中的部分组件 keep-alive <keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 分析及解决 路由缓存 由于只缓存部分页面， <template> <div id="app"> <!--此处省略若干代码--> <keep-alive&gt
如何在Vue3.2的setup中设置组件名、在vben-admin中实现页面缓存？
时清云的博客
10-22 3117
为什么会取这样的标题名？有很多小伙伴会有这样的问题。我先解答一下，和设置组件名的方式不一样，想要通过实现页面缓存，一定要设置组件名，所以有个先后顺序，先设置组件名，然后实现页面缓存。我们先看一下在和中分别是怎么设置组件名的？
vben-admin 页面切换清除缓存
xiaofiy的博客
07-08 1843
vben-admin 清除页面缓存
vue 处理页面缓存问题，点击tab标签不刷新页面，点击菜单刷新页面，附带处理报表iframe缓存页面
weixin_40466351的博客
06-03 5586
效果图 1、index页面 主要代码 <keep-alive :include="keepAliveList"> <router-view class="avue-view" v-if="keepAlive"/> </keep-alive> provide() { return { index: this, routerRefresh: this.routerRefresh }; }, data() { return
vue-element-admin实现多级路由缓存
06-09
Vue-element-admin 是基于 Vue.js 和 Element UI 实现的后台管理系统框架。它采用了 Vue Router 实现路由跳转和页面切换。在 Vue-element-admin 中，实现多级路由缓存可以通过以下步骤： 1. 在路由配置文件中，设置需要缓存的路由组件的 meta 属性中添加 keepAlive: true。 ``` const routes = [ { path: '/', component: Layout, redirect: '/dashboard', children: [ { path: 'dashboard', component: () => import('@/views/dashboard/index'), name: 'Dashboard', meta: { title: 'Dashboard', icon: 'dashboard', keepAlive: true } } ] } ] ``` 2. 在 App.vue 文件中，添加 keep-alive 组件，并设置 include 属性为需要缓存的路由组件的名称。 ``` <template> <div id="app"> <keep-alive :include="cachedViews"> <router-view /> </keep-alive> </div> </template> <script> export default { name: 'App', computed: { cachedViews() { return this.$store.state.tagsView.cachedViews } } } </script> ``` 3. 在 store 文件夹中创建 tagsView.js 文件，设置需要缓存的路由组件的名称和缓存状态。 ``` const state = { cachedViews: [] } const mutations = { ADD_CACHED_VIEW: (state, view) => { if (state.cachedViews.includes(view.name)) return if (!view.meta.keepAlive) return state.cachedViews.push(view.name) }, DEL_CACHED_VIEW: (state, view) => { const index = state.cachedViews.indexOf(view.name) if (index > -1) { state.cachedViews.splice(index, 1) } } } const actions = { addCachedView({ commit }, view) { commit('ADD_CACHED_VIEW', view) }, delCachedView({ commit }, view) { commit('DEL_CACHED_VIEW', view) } } export default { namespaced: true, state, mutations, actions } ``` 这样就可以实现多级路由缓存了。需要注意的是，路由组件的名称必须是唯一的，否则可能会出现缓存错误。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值