console.log(this.$router.options.routes,this.$route) 全部路由 点前路由
<template>
<el-row class="container">
<el-col :span="24" class="header">
<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
{{collapsed?'':sysName}}
</el-col>
<el-col :span="10">
<div class="tools" @click.prevent="collapse">
<i class="fa fa-align-justify"></i>
</div>
</el-col>
<el-col :span="4" class="userinfo">
<el-dropdown trigger="hover">
<span class="el-dropdown-link userinfo-inner"><img src="../assets/headicon.png" /> {{sysUserName}}</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item>我的消息</el-dropdown-item>
<el-dropdown-item>设置</el-dropdown-item> -->
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-col>
<el-col :span="24" class="main">
<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
<!--导航菜单-->
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
unique-opened router v-if="!collapsed">
<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
<el-submenu :index="index+''" :key="index" v-if="!item.leaf">
<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<el-menu-item v-for="(child,index) in item.children" :index="child.path" :key="index" v-show="!child.hidden">{{child.name}}</el-menu-item>
</el-submenu>
<!-- <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item> -->
</template>
</el-menu>
<!--导航菜单-折叠后-->
<ul class="el-menu el-menu-vertical-demo collapsed" v-if="collapsed" ref="menuCollapsed">
<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
<template v-if="!item.leaf">
<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
</ul>
</template>
<template v-else>
<li class="el-submenu">
<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
</li>
</template>
</li>
</ul>
</aside>
<section class="content-container">
<div>
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="tabClick">
<el-tab-pane
v-for="item in editableTabs"
:key="item.component"
:label="item.name"
:name="item.component"
>
</el-tab-pane>
</el-tabs>
</div>
<div class="grid-content bg-purple-light">
<el-col :span="24" class="breadcrumb-container">
<strong class="title">{{$route.name}}</strong>
<el-breadcrumb separator="/" class="breadcrumb-inner">
<el-breadcrumb-item v-for="item in $route.matched" :index ='item.path' :key="item.path">
{{ item.name }}
</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</el-col>
</div>
</section>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
sysName:'CUADMIN',
collapsed:false,
sysUserName: '',
sysUserAvatar: '',
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
editableTabs: [
{
name:'用户列表',
path:'/uselist',
component:'/userlist',
close: 'closable'
}
],
tabIndex: 1,
editableTabsValue: '/userlist',
}
},
watch:{
'$route':function(to){
let flag = true
let toPath = to.path
// 重复不添加
for(let i=0;i<this.editableTabs.length;i++){
if(this.editableTabs[i].component==toPath){
flag = false
break
}
}
if(flag){
this.editableTabs.push({
name:to.name,
path:to.path,
component:to.fullPath,
})
}
this.editableTabsValue=to.fullPath
}
},
methods: {
removeTab(targetPath){
let tabs = targetPath //删除的tab
let activeTabs = this.editableTabsValue //当前的tab
let tabsList = this.editableTabs
// 删除当前
if(tabs == activeTabs){
tabsList.forEach((tab,index)=>{
if(tab.component==tabs){
this.editableTabs = this.arrMove(this.editableTabs,tab)
if(index>1){
let nextTab = this.editableTabs[index - 1] || this.editableTabs[index + 1];
if(nextTab)
this.$router.push({
path: nextTab.component
})
}
}
})
}else{
// 删除不咋当前
tabsList.forEach((tab,index)=>{
if(tab.component==tabs)
this.editableTabs = this.arrMove(this.editableTabs,tab)
})
}
},
arrMove(arr, key){
var temp = [];
for (var i=0; i<arr.length; i++){
if (arr[i] != key){
temp.push(arr[i]);
}
}
return temp;
},
tabClick(openPath){
this.$router.push({
path: openPath.name
})
},
onSubmit() {
console.log('submit!');
},
handleopen() {
// console.log('handleopen');
},
handleclose() {
// console.log('handleclose');
},
handleselect: function (a, b) {
},
//退出登录
logout: function () {
var _this = this;
this.$confirm('确认退出吗?', '提示', {
//type: 'warning'
}).then(() => {
sessionStorage.removeItem('boxToken');
_this.$router.push('/login');
}).catch(() => {
});
},
//折叠导航栏
collapse:function(){
this.collapsed=!this.collapsed;
},
showMenu(i,status){
this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
}
},
mounted() {
var user = sessionStorage.getItem('user');
if (user) {
user = JSON.parse(user);
this.sysUserName = user.name || '';
this.sysUserAvatar = user.avatar || '';
}
},
created(){
// 刷新在当前路由添加
let to =this.$route
let flag = true
let toPath = to.path
for(let i=0;i<this.editableTabs.length;i++){
if(this.editableTabs[i].component==toPath){
flag = false
break
}
}
if(flag){
this.editableTabs.push({
name:to.name,
path:to.path,
component:to.fullPath,
})
}
this.editableTabsValue=to.fullPath
}
}
</script>
<style scoped lang="scss">
@import '~scss_vars';
.container {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
.header {
height: 60px;
line-height: 60px;
background: $color-primary;
color:#fff;
.userinfo {
text-align: right;
padding-right: 35px;
float: right;
.userinfo-inner {
cursor: pointer;
color:#fff;
img {
width: 40px;
height: 40px;
border-radius: 20px;
margin: 10px 0px 10px 10px;
float: right;
}
}
}
.logo {
//width:230px;
height:60px;
font-size: 22px;
padding-left:20px;
padding-right:20px;
border-color: rgba(238,241,146,0.3);
border-right-width: 1px;
border-right-style: solid;
img {
width: 40px;
float: left;
margin: 10px 10px 10px 18px;
}
.txt {
color:#fff;
}
}
.logo-width{
width:230px;
}
.logo-collapse-width{
width:60px
}
.tools{
padding: 0px 23px;
width:14px;
height: 60px;
line-height: 60px;
cursor: pointer;
}
}
.main {
display: flex;
// background: #324057;
position: absolute;
top: 60px;
bottom: 0px;
overflow: hidden;
aside {
flex:0 0 230px;
width: 230px;
// position: absolute;
// top: 0px;
// bottom: 0px;
.el-menu{
height: 100%;
}
.collapsed{
width:60px;
.item{
position: relative;
}
.submenu{
position:absolute;
top:0px;
left:60px;
z-index:99999;
height:auto;
display:none;
}
}
}
.menu-collapsed{
flex:0 0 60px;
width: 60px;
}
.menu-expanded{
flex:0 0 230px;
width: 230px;
}
.content-container {
// background: #f1f2f7;
flex:1;
// position: absolute;
// right: 0px;
// top: 0px;
// bottom: 0px;
// left: 230px;
overflow-y: scroll;
padding: 20px;
.breadcrumb-container {
//margin-bottom: 15px;
.title {
width: 200px;
float: left;
color: #475669;
}
.breadcrumb-inner {
float: right;
}
}
.content-wrapper {
background-color: #fff;
box-sizing: border-box;
}
}
}
.el-menu-vertical-demo{
// width: 230px!important;
}
}
</style>
vue tabs 添加路由 删除tabs
最新推荐文章于 2024-04-07 10:31:59 发布