ant design vue pro 支持多页签模式 页签可以缓存

最新推荐文章于 2024-09-24 08:49:33 发布
最新推荐文章于 2024-09-24 08:49:33 发布
阅读量5.6k 收藏 10
点赞数 3
分类专栏： ant-design vue vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abcdefg182/article/details/108454433
版权

ant design vue pro 支持多页签模式 页签可以缓存
代码贴在最后

启动之后页面是这样的：
在这里插入图片描述
第一步：修改 src/layouts/BasicLayout.vue 文件，在该文件中添加multiTab代码块，并在页面定义 multiTab和fixedHeader 变量值
在这里插入图片描述
在这里插入图片描述

第二步：修改/src/config/defaultSettings.js
在这里插入图片描述
第三步：修改router.config.js，主要是导入RouteView，解决页签不能缓存的问题
在这里插入图片描述
第四步：自己在菜单配置的页签要把组件改成RouteView(框架自带的菜单就不用改了)

最低0.47元/天 解锁文章
_想睡觉
关注
专栏目录
ant-design-pro-V5-multitab:基于 ant design pro V5 版本实现多标签切换 基于umi插件 umi-plugin-keep-alive 实现 （目前只支持layout
05-25
ant-design-pro-V5-multitab 基于 ant design pro V5 版本实现多标签切换 基于umi插件 umi-plugin-keep-alive 实现 （目前只支持layout: "side"模式， fixedHeader: true,）
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip
01-03
Vue3+Vite+TypeScript+Ant Design Vue+Pinia是一个现代前端开发的组合，用于构建高效、可维护的后台管理系统。这个项目充分利用了这些技术的优势，提供了丰富的功能和优化的开发体验。以下是对这些技术及其在后台...
Ant Design Vue Pro（V3.0.0 ）MultiTab标签缓存，完美解决
HSJ0170的博客
01-21 6423
使用Ant Design Vue Pro 基础框架都知道好用，但是MultiTab标签一直未解决（V3.0.3），最新版解决了但是要收费9K（2022-01-21日）。 首先需要实现如下： MultiTab标签打开菜单路由页面之后keep-alive就一直保持缓存当前路由页面，直到点击MultiTab标签的X（或者点击菜单：关闭当前/关闭左边/关闭右边/关闭全部）此时删除keep-alive缓存。下次重新打开时候重新缓存菜单路由页面到keep-alive并再次保持缓存。 这里有个注意的地方有的菜单路由页面
推荐文章：Vue Router Tab - 打造高效多页签应用利器
最新发布
gitblog_00003的博客
09-24 357
推荐文章：Vue Router Tab - 打造高效多页签应用利器 项目地址:https://gitcode.com/gh_mirrors/vu/vue-router-tab 在追求极致用户体验的前端世界中，多页签导航已成为提高效率和增强界面交互性的关键功能之一。今天，我们要向您隆重介绍一个强大的开源项目——Vue Router Tab，它为Vue.js应用程序带来了优雅且高效的多页签管理解决方案...
Ant design vue pro 添加多页签
深漂小码哥
04-04 6300
1.修改模板 /src/layouts/BasicLayout.vue 添加如下代码 第一处： <!-- layout content --> <a-layout-content :style="{ height: '100%', margin: '0 0 40px 0', paddingTop: fixedHeader ? '64px' : '0' }"> <multi-tab v-if="multiTab"></multi-ta
ant design pro多页签功能
nbin2008的博客
07-11 545
ant design pro4，多页签处理
antd pro v5 tab标签卡（多标签页）实现
星宇大前端
05-04 7258
多标签页很多公司的后台管理系统都会有这个需求，之前用vue一般架子也是带的，现在公司用了antd pro ，看了下官方不支持，确实会影响性能，但是架不住需求。 背景 先看下远古截图： https://github.com/ant-design/ant-design-pro/issues/220 17年提出的需求现在还没有实现，看样官方也是铁了心了。在看看提供的其他解决方案： https://github.com/LANIF-UI/dva-boot-admin https://github.com/.
本项目基于vue、antdesignvue和bpmn.io@7.0，实现flowable的modeler流程设计器.zip
10-21
在本项目中，开发者利用了Vue.js作为前端框架，Ant Design Vue作为UI组件库，以及bpmn.io@7.0版本，实现了Flowable的Modeler流程设计器。Flowable是一款强大的业务流程管理（BPM）和工作流引擎，它提供了模型器、...
基于springboot，ant-design-vue-pro的简易后台管理系统.zip
02-22
3.2 Pro版本：Ant-Design-Vue-Pro是其企业级的解决方案，包含完整的后台管理系统模板，包括登录、权限控制、多语言等功能。 3.3 动态路由：Pro版本实现了动态路由管理，可以根据用户权限动态加载页面。 3.4 布局与...
antd-design-pro实现多页签，切换页签保留缓存，keep-alive
前端小白成长记
12-21 8941
感谢该大佬提供的组件：GitHub - CJY0208/react-activation: Hack <KeepAlive /> for React react 里 keep-alive 的实现目前是黑科技，会有些问题 使用过程中遇到问题的话，可以优先看这儿 https://github.com/CJY0208/react-activation/blob/master/README_CN.md#breaking-change-%E7%94%B1%E5%AE%9E%E7%8E%B0%E5%.
react-ant-pro：（基于pro 1.0）基于Ant Design Pro的后台项目修改的多标签页标签（多标签tab，拖拽，富文本，多功能表，多选选择，React Hooks）
02-05
ant-design-tabs（支持多标签tabs） 体验环境 体验环境： ://kuhami.github.io/react-ant-pro账号：admin / user密码：888888/123456 由于体验环境发出的请求针对的是不存在的记录，服务器没有进行操作会报请求错误404。 特征页面 :gem_stone:优雅美观：基于Ant Tabs系统精心设计 :triangular_ruler:常见设计模式：提炼自中后台应用的典型页面和场景 :rocket:最新技术栈：使用React / umi / dva / antd等尖端前沿技术开发 :mobile_phone:响应式：针对不同屏幕大小设计 :artist_palette:主题：可配置的主题满足数值的品牌诉求 :globe_with_meridians:国际化：内建领导人通用的国际化
ant design vue pro 支持多页签模式
热门推荐
sunshu123456的博客
08-03 1万+
ant design vue pro 支持多页签模式（tablayout ） 在最新的 ant design vue Pro 代码展示的功能中是使用的面包屑，省去了多页签模式，那么当面对一些场景需要使用多页签模式，我们该如何实现呢？网络上目前没什么帖子，有些人建议参考jeecg。经过不断的对比很久之前的版本与尝试，最终实现了该功能需求。 1、git拉取代码，启动项目 1、git clone https://github.com/sendya/ant-design-pro-vue.git 2、cd ant-d
手把手带你基于ant design pro 5实现多tab页(路由keepalive)
fudebao的博客
03-20 4912
前几天在一个前端群里，看到一位群友在吐槽react不支持keepalive，没办法实现多页签，这篇文章就我就用react 基于antd pro 5实现一下这个功能。
Ant Design Pro支持多Tabs布局（支持类似vue的keepalive功能）
atec2000的专栏
11-21 648
最近umi升级到umi4了，Ant Design Pro也升级了，已经内置了多Tabs布局并支持类似vue的keepalive功能，在项目创建好之后，只需要一些简单的配置就可以了。// 多Tabs布局，只需要配置下面两项即可。配置文件：config/config.ts。只需要一些简单的配置。
基于Ant Design Pro的多页签功能实现教程
gitblog_00661的博客
09-13 872
基于Ant Design Pro的多页签功能实现教程 项目地址:https://gitcode.com/gh_mirrors/an/antd-pro-keepalive-tabs 项目介绍 antd-pro-keepalive-tabs 是一个基于 Ant Design Pro 5 实现的多页签功能项目。该项目通过自定义布局和路由管理，实现了类似 Vue 的 keep-alive 功能，使得在切换...
Ant-Design-Pro-V5：实现打开页面多页签切换
hyupeng1006的博客
09-04 1708
项目中打开多个页面，可使用多页签切换，相互切换时并保留各页面的状态
React + Ant Design Pro项目实现keep-alive页签
wzp6010625的博客
07-07 2984
react + ant design pro项目实现keep-alive页签
ant design pro 面包屑和多标签页
qq_63608386的博客
07-11 1512
ant design pro 路由
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值