76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
<template>
|
|
<div class="router-history">
|
|
<el-tabs v-model="activeValue" type="card" :closable="!(historys.length==1&&this.$route.name=='dashboard')" @tab-click="changeTab" @tab-remove="removeTab">
|
|
<el-tab-pane
|
|
v-for="item in historys"
|
|
:key="item.name"
|
|
:label="item.meta.title"
|
|
:name="item.name"
|
|
>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name:"HistoryComponent",
|
|
data(){
|
|
return{
|
|
historys:[],
|
|
activeValue:"dashboard"
|
|
}
|
|
},
|
|
created(){
|
|
const initHistorys = [
|
|
{
|
|
name:"dashboard",
|
|
meta:{
|
|
title:"仪表盘"
|
|
}
|
|
}
|
|
]
|
|
this.historys = JSON.parse(sessionStorage.getItem("historys")) || initHistorys
|
|
this.setTab(this.$route)
|
|
},
|
|
methods:{
|
|
setTab(route){
|
|
if(!this.historys.some(item=>item.name==route.name)){
|
|
const obj = {}
|
|
obj.name = route.name
|
|
obj.meta = route.meta
|
|
this.historys.push(obj)
|
|
}
|
|
this.activeValue = this.$route.name
|
|
},
|
|
changeTab(tab){
|
|
this.$router.push({name:tab.name})
|
|
},
|
|
removeTab(tab){
|
|
const index = this.historys.findIndex(item=>item.name == tab)
|
|
if(this.$route.name == tab){
|
|
if(this.historys.length==1){
|
|
this.$router.push({name:"dashboard"})
|
|
}else{
|
|
if(index<this.historys.length-1){
|
|
this.$router.push({name:this.historys[index+1].name})
|
|
}else{
|
|
this.$router.push({name:this.historys[index-1].name})
|
|
}
|
|
}
|
|
}
|
|
this.historys.splice(index,1)
|
|
}
|
|
},
|
|
watch:{
|
|
$route( to ){
|
|
this.historys = this.historys.filter(item=>!item.meta.hidden)
|
|
this.setTab(to)
|
|
sessionStorage.setItem("historys",JSON.stringify(this.historys))
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
|
|
</style> |