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

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

启动之后页面是这样的：

第一步：修改 src/layouts/BasicLayout.vue 文件，在该文件中添加multiTab代码块，并在页面定义 multiTab和fixedHeader 变量值

第二步：修改/src/config/defaultSettings.js

第三步：修改router.config.js，主要是导入RouteView，解决页签不能缓存的问题

第四步：自己在菜单配置的页签要把组件改成RouteView(框架自带的菜单就不用改了)

效果如图：

具体代码如下：

第一步：修改 src/layouts/BasicLayout.vue 文件，在该文件中添加multiTab代码块，并在页面定义 multiTab和fixedHeader 变量值

<a-layout-content :style="{ height: '100%', margin: '0 0 40px 0', paddingTop: fixedHeader ? '64px' : '0' }"><multi-tab v-if="multiTab"></multi-tab><transition name="page-transition"></transition>
</a-layout-content>

import MultiTab from '@/components/MultiTab'
import config from '@/config/defaultSettings'//原来就存在了export default {components: {MultiTab
},data() {return {multiTab: config.multiTab,fixedHeader: config.fixedHeader}},
}

第二步：修改/src/config/defaultSettings.js

export default {navTheme: 'dark', // theme for nav menuprimaryColor: '#1890ff', // primary color of ant designlayout: 'sidemenu', // nav menu position: `sidemenu` or `topmenu`contentWidth: 'Fluid', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenufixedHeader: false, // sticky headerfixSiderbar: false, // sticky siderbarcolorWeak: false,multiTab: true, //--------改这里  是否展示页签 menu: {locale: true,keepAlive: true,},title: 'MoJie Ant',pwa: false,iconfontUrl: '',production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true'
}

第三步：改router.config.js 主要导入RouteView(实现页签缓存)

import { UserLayout, BasicLayout, BlankLayout, PageView,RouteView } from '@/layouts'
import { bxAnaalyse } from '@/core/icons'

第四步：如果是自己配置的菜单，要把组件改成RouteView,如下图所示，框架自带的菜单栏目不用改

效果如图：

ant design vue pro 支持多页签模式页签可以缓存相关推荐

Ant Design Vue Pro（V3.0.0 ）MultiTab标签缓存，完美解决
使用Ant Design Vue Pro 基础框架都知道好用,但是MultiTab标签一直未解决(V3.0.0),最新版解决了但是要收费9K(2022-01-21日). 首先需要实现如下: Multi ...
vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...
Ant design vue pro 添加多页签
1.修改模板 /src/layouts/BasicLayout.vue 添加如下代码第一处: <a-layout-content :s ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue
2018年我写的Vue组件库对比文档: https://juejin.im/post/5a9628415188257a7b5ac678 一年的时间,每一个组件库都有了更多的发展,Ant Design ...
Ant Design Vue 2.x+ 支持所有的现代浏览器。
兼容性 # Ant Design Vue 2.x+ 支持所有的现代浏览器. 如果需要支持 IE9+,你可以使用 Ant Design Vue 1.x & Vue 2.x. npm config ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
Element UI, Ant Design Vue
1. 对比框架名称组件数量单元测试率 admin项目维护团队 GitHub Star数(2019/10/16) 原型设计素材 Element UI 46 81% vue-element-adm ...

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

ant design vue pro 支持多页签模式页签可以缓存相关推荐

最新文章

热门文章

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

ant design vue pro 支持多页签模式 页签可以缓存相关推荐

最新文章

热门文章

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

ant design vue pro 支持多页签模式页签可以缓存相关推荐