Vue+Element实现tab多标签切换页面
效果图GIF
思路
思路是看了这篇文章：
https://www.cnblogs.com/qdhxhz/p/12590324.html
1、首页的tag一开始就会存在，而且是不能进行删除的
2、当点击左侧栏的时候,如果tag没有该菜单名称则新增，
如果已经有了那么当前tag背景为蓝色。
3、删除当前tag，如果是最后一个tag，那么路由调整到它前面那个标签并且背景变蓝，如果不是最后一个那么路由调整到它后面那个标签并且背景变蓝。
4、还有要注意这个tag不论路由如何切换都是会存在的，所以这个tag一定要存在的home.vue中。
代码
home.vue文件。贴出所有代码，所有代码全都有注释
<template>
<el-container class="home-container">
<!-- 侧边栏 -->
<el-aside :width="isCollapse ? '64px' : '200px'">
<!-- 头部logo -->
<template>
<div class="header-title" v-if="!isCollapse">
<img width="25px" height="25px" src="../assets/logo-light-icon.png" >
<span>天天代理系统</span>
</div>
<div class="header-title-hiddle" v-else>
<img width="35px" height="35px" src="../assets/logo-light-icon.png" >
</div>
</template>
<!-- 菜单区域 -->
<el-menu
background-color="#282C34"
text-color="#fff"
active-text-color="#fff"
:collapse="isCollapse"
:collapse-transition="false"
:default-active="'/' + activePath"
unique-opened
router>
<!-- 首页 -->
<el-menu-item index="/home" key="home">
<i :class="iconObj['home']"></i>
<span slot="title">首页</span>
</el-menu-item>
<!-- 代理用户管理 -->
<el-menu-item index="/agent-user-manage" key="agent-user-manage">
<i :class="iconObj['agent-user-manage']"></i>
<span slot="title">代理用户管理</span>
</el-menu-item>
<!-- 开通下级代理 -->
<el-menu-item index="/sub-agent-user" key="sub-agent-user">
<i :class="iconObj['sub-agent-user']"></i>
<span slot="title">开通下级代理</span>
</el-menu-item>
</el-menu>
</el-aside>
<!-- 主体 -->
<el-container>
<!-- 头部 -->
<el-header>
<!-- 头部导航栏 -->
<div class="header-row">
<!-- 折叠 展开 和 名人名言 -->
<div class="toggle-button">
<div>
<i :title="isCollapse ? '展开' : '收起'" class="fa fa-bars" @click="toggleCollapse"></i>
</div>
<div style="height:25px;width:100%;margin-left:10px">
<div style="float:left;color:#E74405;font-size:16px;height:25px;line-height:25px;">
<i class="fa fa-bullhorn"></i>
</div>
<el-carousel height="25px" direction="vertical" indicator-position="none" autoplay :interval="8000">
<el-carousel-item v-for="item in mottoList" :key="item">
<h3 class="medium">{
{
item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</div>
<!-- 头像下拉菜单 -->
<div class="header-avatar">
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
<img width="35" height="35" style="border-radius:50%;background:#dddddd" src="../assets/logo.png" alt="">
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item command="a">黄金糕</el-dropdown-item>
<el-dropdown-item command="a">狮子头</el-dropdown-item> -->
<!-- <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item> -->
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<!-- tab标签页区域 - 用于标签页切换 -->
<div class="tabs-switch-page">
<el-tag
size="medium"
v-for="(tab, index) in tabList"
:key="tab.name"
@close="handleClose(tab, index)"
@click="changeMenu(tab)"
:closable="tab.name !== 'home'"
:effect="activePath === tab.name ? 'dark' : 'plain'"
>
{
{
tab.label}}
</el-tag>
</div>
</el-header>
<!-- 内容区 -->
<el-main>
<!-- 路由占位符，用于展示内容区的内容 -->
<div style="padding:15px">
<keep-alive :include="catch_components">
<router-view />
</keep-alive>
</div>
</el-main>
</el-container>
</el-container>
</template>
<script>
import {
mapState, mapMutations } from 'vuex';
export default {
//组件被创建
created() {
},
computed: {
...mapState({
// 从 state 中的到的计算属性
activePath: state => state.activePath, // 已选中菜单
tabList: state => state.tabList, // tags菜单列表
catch_components: state => state.catch_components, // keepalive缓存
})
},
data() {
return{
// 格言
mottoList: [
'等风来不如追风去，追逐的过程就是人生的意义',
'当你想要放弃了，那就想想当初为什么开始',
'自强之人谁也打不倒，自弃之人谁也带不动',
'既然无法选择回去的路程，那么就清晰的面对已经造成的挑战',
'在难过的时候，不要忘记自己还要前进',
'人生能有几次搏？莫到白发还未博'
],
menuList: [],
// 折叠-展开 默认false不折叠
isCollapse: false,
//字体 - 菜单id对应图标
iconObj: {
'home': 'fa fa-tachometer',
'agent-user-manage':'fa fa-address-book-o',
'sub-agent-user':'fa fa-bath',
'3':'fa fa-envelope-open',
'4':'fa fa-free-code-camp',
'5':'fa fa-grav'
}
}
},
methods: {
// 右上角下拉菜单点击事件
handleCommand(command){
switch(command){
// 退出
case 'logout':
// 删除缓存数据
window.sessionStorage.clear()
// 重置vuex中的数据
this.$store.state.activePath = 'home'
this.$store.state.tabList = [
{
path: 'home', label: '首页', name: 'home'}
]
// 跳转到登录页
this.$router.push("/login");
break
}
},
// 点击折叠 展开菜单
toggleCollapse(){
this.isCollapse = !this.isCollapse;
},
// 点击菜单 - 传入name，添加到keepalive缓存页面
selectMenu(val){
// 加入keepalive缓存
this.$store.commit('addKeepAliveCache', val)
},
// 关闭tab标签
handleClose(tab, index) {
// 历史选中菜单
var oldActivePath = this.$store.state.activePath
// 历史已选中菜单列表
var oldTabList = this.$store.state.tabList
// 计算标签个数
let length = oldTabList.length - 1
// 删除tabList中的该对象
for(let i = 0;i < oldTabList.length;i++){
let item = oldTabList[i]
if(item.name === tab.name){
oldTabList.splice(i, 1);
}
}
// 删除keepAlive缓存
this.$store.commit('removeKeepAliveCache', tab.name)
// 如果关闭的标签不是当前路由的话，就不跳转
if (tab.name !== oldActivePath) {
return
}
// 如果length为1，必然只剩下首页标签，此时关闭后，更新到首页
if(length === 1){
// 同时存储菜单
this.$store.commit('closeTab', {
activePath: 'home', tabList: oldTabList})
// tab页向左跳转
this.$router.push({
name: oldTabList[index - 1].name })
// 不再向下执行
return
}
// 关闭的标签是最右边的话，往左边跳转一个
if (index === length) {
// 同时更新路径
oldActivePath = oldTabList[index - 1].name
// 同时存储菜单
this.$store.commit('closeTab', {
activePath:oldActivePath, tabList: oldTabList})
// tab页向左跳转
this.$router.push({
name: oldTabList[index - 1].name })
} else {
// 同时更新路径
oldActivePath = oldTabList[index].name
// 同时存储菜单
this.$store.commit('closeTab', {
activePath:oldActivePath, tabList: oldTabList})
// tab页向右跳转
this.$router.push({
name: oldTabList[index].name })
}
},
// 点击标签跳转路由
changeMenu(item) {
// 历史选中菜单
var oldActivePath = this.$store.state.activePath
// 历史已选中菜单列表
var oldTabList = this.$store.state.tabList
// 首先判断点击的是否是自己，如果是自己则return
if(oldActivePath === item.name){
return
}
// 不是自己，存储菜单
this.$store.commit('changeMenu', item.name)
// 页面跳转
this.$router.push({
name: item.name })
},
},
};
</script>
<style lang="less" scoped>
.home-container{
height: 100%;
}
.el-header{
color: rgb(0, 0, 0);
font-size: 20px;
border-bottom: 1px solid #dddddd;
height: 103px !important;
padding: 0;
background: #fff;
}
.header-row{
height:60px;
width:100%;
display: flex;
flex-direction:row;
justify-content: center;
border-bottom:1px solid #dddddd;
overflow: hidden;
}
.header-avatar{
float:right;
width:20%;
display: flex;
align-items: center;
justify-content:flex-end;
padding-right:20px;
}
.el-aside{
background-color: #282C34;
.header-title{
padding-left: 10px;
height: 60px;
color: #fff;
font-weight: bold;
display: flex;
font-size: 20px;
align-items: center;
cursor: pointer;
span{
margin-left: 15px;
}
}
.header-title-hiddle{
width: 64px;
height: 64px;
display: table-cell;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
.header-title-hiddle:hover{
background-color: #20232A;
}
.el-menu{
border-right: none;
}
}
// 菜单选中背景色
.el-menu-item.is-active{
background-color: #1890FF !important;
}
// 菜单悬浮背景色
.el-menu-item:hover{
background-color: #1890FF !important;
}
// 走马灯
.el-carousel__item h3 {
color: #ee7c12;
font-size: 14px;
opacity: 0.75;
line-height: 25px;
margin: 0;
}
.el-main{
background-color: #eaedf1;
padding: 0;
}
.fa{
margin-right: 10px;
}
// 点击展开/折叠按钮
.toggle-button{
width: 80%;
font-size: 20px;
line-height: 40px;
color:#595959;
text-align: left;
display: flex;
align-items: center;
float:left;
padding-left: 20px;
i{
cursor: pointer;
}
}
// 面包屑导航
.el-breadcrumb{
margin-bottom: 0;
}
// tab页
.tabs-switch-page{
display: flex;
align-items:center;
height: 40px;
background-color:#fff;
overflow: hidden;
}
.el-tag{
cursor: pointer;
margin-left: 10px;
border-radius: 2px;
font-size: 12px;
color: #1890FF;
border-color: #1890FF;
}
.el-tag--dark{
color: #fff;
background-color: #1890FF;
}
.el-dropdown-link {
cursor: pointer;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
Vuex的store目录中的index.js
import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex.Store({
// 共享状态（即变量）
state:{
// 缓存组件页面
catch_components: [],
// 全局请求后台URL
baseURL: 'http://localhost:9999',
// 当前选中的菜单 - 默认选择首页
activePath: 'home',
// 菜单项 - 默认包含首页
tabList: [
{
path: 'home', label: '首页', name: 'home'}
]
},
// 更改vuex的store中状态的唯一方法 - 同步操作
mutations: {
// 跳转页面执行
selectMenu(state, submenu) {
// 首页就是 wellcome 也就是 home
if(submenu.name === 'wellcome' || submenu.name === 'home'){
submenu.name = 'home'
submenu.path = 'home'
}
// 当前选中菜单
var activePath = submenu.path
// 历史已选中菜单列表
var oldTabList = state.tabList
// 将菜单信息添加到tablist - 添加时判断是否已有该标签
var result = oldTabList.some(item => {
if(item.name === activePath){
return true
}
})
// 如果不包含该对象，则添加
if(!result){
oldTabList.push({
path: submenu.path,
name: submenu.path,
label: submenu.authName
})
}
// 重新赋值
state.activePath = activePath
state.tabList = oldTabList
},
// 添加keepalive缓存
addKeepAliveCache(state, val){
// 如果是首页、文章编辑页，不缓存
if(val === 'wellcome' || val === 'home' || val == 'posts-edit'){
return
}
// 添加时判断，如果该组件已存在，则不添加
if(state.catch_components.indexOf(val) === -1) {
// 不存在，缓存页面
state.catch_components.push(val)
}
},
// 删除keepalive缓存
removeKeepAliveCache(state, val){
let cache = state.catch_components
for(let i = 0;i < cache.length;i++){
if(cache[i] === val){
cache.splice(i, 1);
}
}
state.catch_components = cache
},
//关闭菜单
closeTab(state, val) {
// 重新赋值
state.activePath = val.activePath
state.tabList = val.tabList
},
// 点击标签选择菜单
changeMenu(state, val) {
state.activePath = val
}
},
// 和mutations类似，异步操作
Action: {
}
})
export default store