vue-element-template实战(三)增加多标签页
按照作者所说的,需要什么功能,从vue-element-admin-master中拷贝过来使用即可。
一、从vue-element-admin复制文件:
vue-admin-template\src\layout\components\TagsView 文件夹
vue-admin-template\src\store\modules\tagsView.js
二、修改 vue-admin-template\src\layout\components\AppMain.vue :AppMain.vue文件,修改如下:
<template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> <!-- <router-view :key="key" />--> <keep-alive :include="cachedViews"> <router-view :key="key" /> </keep-alive> </transition> </section> </template>
<script> export default { name: 'AppMain', computed: { //需要缓存的页面 固钉 cachedViews() { return this.$store.state.tagsView.cachedViews }, key() { return this.$route.fullPath } } } </script>
<style lang="scss" scoped> .hasTagsView { .app-main { /* 84 = navbar + tags-view = 50 + 34 */ min-height: calc(100vh - 84px); } .fixed-header+.app-main { padding-top: 84px; } } </style> <style lang="scss"> // fix css style bug in open el-dialog .el-popup-parent--hidden { .fixed-header { padding-right: 15px; } } </style>
三、修改vue-admin-template\src\layout\components\index.js,新增如下行
export { default as TagsView } from './TagsView'
四、在 vue-admin-template\src\layout\index.vue 文件中 新增 tagsview标签
<template>
<div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar class="sidebar-container" />
<div class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar />
</div>
<tags-view /> <!-- 此处增加tag-->
<app-main />
</div>
</div>
</template>
import { Navbar, Sidebar, AppMain,TagsView } from './components'
components: { Navbar, Sidebar, AppMain, TagsView //新增 },
五、vue-admin-template\src\store\getters.js,增加:
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
六、修改 vue-admin-template\src\store\index.js
import tagsView from './modules/tagsView'
const store = new Vuex.Store({ modules: { app, settings, tagsView, //此处新增 user }, getters })
七、修改vue-admin-template\src\settings.js 添加
tagsView: true,
设置为根据值,是否选择加载。
八、修改vue-admin-template\src\store\modules\settings.js
const { showSettings, fixedHeader, sidebarLogo,tagsView } = defaultSettings
const state = { showSettings: showSettings, tagsView: tagsView, //此处新增 fixedHeader: fixedHeader, sidebarLogo: sidebarLogo }
九、解决问题
1、删除vue-admin-template\src\layout\components\TagsView\index.vue中routes方法(因为没有用到权限校验)
computed: { visitedViews() { return this.$store.state.tagsView.visitedViews }/*, routes() { return this.$store.state.permission.routes }*/ },
2、遍历标签时可能控制台报错
filterAffixTags(routes, basePath = '/') { let tags = [] //判断是否为空,否则控制台会报错 if(this.routes){ routes.forEach(route => { if (route.meta && route.meta.affix) { const tagPath = path.resolve(basePath, route.path) tags.push({ fullPath: tagPath, path: tagPath, name: route.name, meta: { ...route.meta } }) } if (route.children) { const tempTags = this.filterAffixTags(route.children, route.path) if (tempTags.length >= 1) { tags = [...tags, ...tempTags] } } }) } return tags },
3、删除全部标签后,会跳到404页面,所以要固定一些版面是不允许删除的。
在meta中加上affix: true就能使它不可删除,例如:meta: { title: '首页', icon: 'dashboard', affix: true }
{ path: '/', component: Layout, redirect: '/dashboard', children: [{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: '后台管理系统', icon: 'dashboard' , affix: true } }] },
以上步骤,亲测可行。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库