Series article catalog
"SpringBoot integrates SpringSecurity to achieve permission control (1): Implementation principle"
"SpringBoot integrates SpringSecurity to achieve permission control (2): Basic model design of permission data"
"SpringBoot integrates SpringSecurity to achieve permission control (3): front-end dynamic loading routing and Menu"
"SpringBoot integrates SpringSecurity to achieve permission control (4): role management"
"SpringBoot integrates SpringSecurity to achieve permission control (5): User management"
"SpringBoot integrates SpringSecurity to achieve permission control (6): Menu management"
"SpringBoot integrates SpringSecurity to achieve permissions Control (7): Permission Assignment"
Contents of this article
1. Description of requirements
The design of multi-tabs (Tabs) has unparalleled efficiency and convenience for multi-window multitasking management
- In the above article, the basic permission functions of background management have been implemented, including users, roles, menu management and permission assignment.
- By clicking the menu in the sidebar, the user can call up the corresponding function page for use. But in the process of using, we found that the program can only open one page at the same time. We prefer that when opening multiple functional pages, these pages are integrated in the same window in the form of tabs. To switch to a certain page or close a certain page, we only need to operate the corresponding tab, which is very convenient and fast. .
Second, the front-end implementation
- Use the element tabs component to build a basic multi-tab page, the example is as follows:
<template>
<div class="tabbar-container">
<el-tabs v-model="pageCurrent" type="card" closable @tab-click="tabChange" @tab-remove="removeTab">
<el-tab-pane
v-for="(item) in pageList"
:key="item.name"
:name="item.name"
class="tabbar-item"
>
<span slot="label">
<span><i :class="item.icon" />{
{ }} {
{ item.label }}</span>
</span>
</el-tab-pane>
</el-tabs>
</div>
</template>
2. Monitor routing changes and associate routing information with the tabs panel list
watch: {
$route: {
handler(to, form = null) {
// 当路由改变时，检测该路由是否已经在打开的页面之中，如果不在，就添加进去
if (to.meta) {
this.pageCurrent = to.path
var index = this.pageList.findIndex(value => {
return value.name === to.path
})
if (index < 0) {
this.pageList.push({
name: to.path, label: to.meta.title, icon: to.meta.icon })
}
}
},
immediate: true
}
},
- Add remove tab page and switch tab page events
methods: {
// 移除tab页
removeTab(targetName) {
if (targetName === '/dashboard') return
const tabs = this.pageList
let activeName = this.pageCurrent
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
const nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
activeName = nextTab.name
}
}
})
}
this.pageCurrent = activeName
this.pageList = tabs.filter(tab => tab.name !== targetName)
this.$router.push({
path: activeName })
},
// 切换标签页
tabChange(tab, event) {
this.$router.push({
path: tab.name })
}
}
- Add a multi-label component to the main layout interface
<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 />
<!-- 加入多标签组件 -->
<tabbar />
</div>
<app-main />
</div>
</div>
</template>
<script>
import {
Navbar, Sidebar, AppMain, Tabbar } from './components'
...
</script>
3. Effect demonstration
