html代码：（用的是el-tab组件）
<el-tabs v-model="activeIndex" type="border-card" @tab-click="tabClick" @tab-remove="tabRemove">
<el-tab-pane :closable="item.name == '首页'?false:true" :key="item.name" v-for="(item) in options" :label="item.name" :name="item.route">
</el-tab-pane>
</el-tabs>
methods:
// tab 切换时, 动态的切换路由
tabClick(tab) {
this.$router.push({
path: this.activeIndex
}); // 路由跳转
}, tabRemove(targetName) {
this.$store.dispatch('menu/deleteTabs', targetName);
// 还同时需要处理一种情况当需要移除的页面为当前激活的页面时, 将上一个 tab 页作为激活 tab
if (this.activeIndex === targetName) {
// 设置当前激活的路由
if (this.options && this.options.length >= ) {
this.$store.dispatch('menu/setActiveIndex', this.options[this.options.length - ].route);
this.$router.push({
path: this.activeIndex
});
}else{
this.$router.push('/home')
}
}
}
数据是存放在vuex中的：
computed: {
options: {
get () {return this.$store.state.menu.options},
set (val) {this.$store.dispatch('menu/addTabs', val)}
},
// 动态设置及获取当前激活的 tab 页
activeIndex: {
get() {
return this.$store.state.menu.activeIndex;
},
set(val) {
this.$store.dispatch('menu/setActiveIndex', val);
}
}
},
mounted:
mounted() {
let options = JSON.parse(window.localStorage.getItem('menuOptions'))
this.activeIndex = localStorage.getItem('menuIndex')
if(!options) {
options = []
this.$router.push('/home')
this.$store.commit('menu/SET_ACTIVEI_NDEX', options.route)
// this.$store.dispatch('menu/setActiveIndex', options.route)
}else {
this.$store.commit('menu/SET_OPTIONS', options)
}
//this.$store.dispatch('menu/setActiveIndex', options.route)
//this.$store.commit('menu/SET_OPTIONS', options)
// 设置当前激活的路由
if (options && options.length >= ) {
for(var i = ; i < options.length; i++){
if(options[i].route == this.activeIndex){
this.$store.dispatch('menu/setActiveIndex', options[i].route)
}
}
}else{
this.$router.push('/home')
}
},
store/menu.js
const state = {
options: [{ route: '/home', name: '首页' }],
activeIndex: '/home'
}
const mutations = {
SET_OPTIONS: (state, data) => {
state.options = data
},
// 添加 tabs
ADD_TABS: (state, data) => {
//state.options.findIndex(m => m.name === data.name) < 0 && state.options.push(data)
state.options.push(data);
localStorage.setItem("menuOptions", JSON.stringify(state.options))
},
// 删除 tabs
DELETE_TABS: (state, route) => {
let index = ;
for (let option of state.options) {
if (option.route === route) {
break;
}
index++;
}
state.options.splice(index, );
localStorage.setItem("menuOptions", JSON.stringify(state.options))
},
// 设置当前激活的 tab,route
SET_ACTIVEI_NDEX: (state, index) => {
state.activeIndex = index;
localStorage.setItem("menuIndex", state.activeIndex)
},
}
const actions = {
addTabs({ commit }, info) {
commit('ADD_TABS', info)
},
deleteTabs({ commit }, info) {
commit('DELETE_TABS', info)
},
setActiveIndex({ commit }, info) {
commit('SET_ACTIVEI_NDEX', info)
},
}
export default {
namespaced: true,
state,
mutations,
actions
}
over!