Tecnologia: biblioteca de componentes vue2+vuex+ elementui
No arquivo store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
tabList:[]
},
mutations: {
addTab: (state, tab) => {
// 如果tab已经存在,不添加新的tabs
if (state.tabList.some(item => item.path === tab.path)) return
state.tabList.push(tab)
}
},
getters: {
// 获取tbsList
getTabs: (state) => {
return state.tabList
}
},
actions: {
},
modules: {
}
})
Pontos funcionais:
1: A guia atualmente ativa é o caminho da rota atual
2: Quando a página é atualizada, se os dados da tabList forem perdidos, use sessionStorage para armazená-los antes de atualizar
3: Ao excluir uma guia, a guia ativa se torna a anterior ou o próximo que foi excluído Um, redefina a guia ativa e a tabList após a exclusão.
4: Monitore as alterações de rota. Se a rota mudar, a guia ativa e a tabList também serão alteradas de acordo.
<template>
<el-tabs
v-model="activeTab"
closable
@tab-remove="removeTab"
@tab-click="clickBtn"
>
<el-tab-pane
:key="index"
v-for="(item, index) in tabList"
:label="item.title"
:name="item.path"
>
{
{ item.content }}
</el-tab-pane>
</el-tabs>
</template>
<script>
import store from '../../store'
export default {
name: '',
data() {
return {
// 当前活跃的tabs
activeTab: '',
}
},
components: {},
computed: {
tabList() {
return store.getters['getTabs']
},
},
watch: {
$route: function () {
this.setActiveTab()
this.addTab()
},
},
created() {},
mounted() {
this.beforeRefresh()
this.setActiveTab()
this.addTab()
},
methods: {
// 设置活跃的tab
setActiveTab() {
this.activeTab = this.$route.path
},
// 添加tab
addTab() {
const { path, meta } = this.$route
const tab = {
path,
title: meta.title,
}
store.commit('addTab', tab)
},
// 点击tab
clickBtn(tab) {
const { name } = tab
this.$router.push({ path: name })
},
// 删除tab
removeTab(target) {
// 当前激活的tab
let active = this.activeTab
const tabs = this.tabList
// 只有一个标签页的时候不允许删除
if (tabs.length === 1) return
if (active === target) {
tabs.forEach((tab, index) => {
// 如果删除的就是当前活跃的tab,就把活跃的tab变成上一个或下一个
const nextTab = tab[index + 1] || tab[index - 1]
if (nextTab) {
active = nextTab.path
}
})
}
// 重新设置当前激活的选项卡和 选项卡列表
this.activeTab = active
store.state.tabList = tabs.filter((tab) => tab.path !== target)
},
// 解决刷新数据丢失问题
beforeRefresh() {
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('tabsView', JSON.stringify(this.tabList))
})
let tabSession = sessionStorage.getItem('tabsView')
if (tabSession) {
let oldTabs = JSON.parse(tabSession)
if (oldTabs.length > 0) {
store.state.tabList = oldTabs
}
}
},
},
}
</script>
Suplemento: Roteamento (router/index.js)
{
path: '/layout',
component: () => import('../layout/index.vue'),
children: [
{
path: 'lay1',
component: () => import('../views/lay/Lay1.vue'),
meta: {
title:'选项1'
}
},
{
path: 'lay2',
component: () => import('../views/lay/Lay2.vue'),
meta: {
title:'选项2'
}
},
{
path: 'lay3',
component: () => import('../views/lay/Lay3.vue'),
meta: {
title:'选项3'
}
},
{
path: 'lay4',
component: () => import('../views/lay/Lay4.vue'),
meta: {
title:'选项4'
}
},
}