element UI中的tab切换栏

html代码：（用的是el-tab组件）

1 <el-tabs v-model="activeIndex" type="border-card" @tab-click="tabClick" @tab-remove="tabRemove">
2    <el-tab-pane :closable="item.name == '首页'?false:true" :key="item.name" v-for="(item) in options" :label="item.name" :name="item.route">
3    </el-tab-pane>
4 </el-tabs>

methods:

 1  // tab 切换时, 动态的切换路由
 2       tabClick(tab) {
 3         this.$router.push({
 4           path: this.activeIndex
 5         }); // 路由跳转
 6       },
 7 
 8 
 9 tabRemove(targetName) {
10         this.$store.dispatch('menu/deleteTabs', targetName);
11         // 还同时需要处理一种情况当需要移除的页面为当前激活的页面时, 将上一个 tab 页作为激活 tab
12         if (this.activeIndex === targetName) {
13           // 设置当前激活的路由
14           if (this.options && this.options.length >= 1) {
15             this.$store.dispatch('menu/setActiveIndex', this.options[this.options.length - 1].route);
16             this.$router.push({
17               path: this.activeIndex
18             });
19           }else{
20             this.$router.push('/home')
21           }
22         }
23       }

数据是存放在vuex中的：

 1 computed: {
 2       options: {
 3         get () {return this.$store.state.menu.options},
 4         set (val) {this.$store.dispatch('menu/addTabs', val)}
 5       },
 6       // 动态设置及获取当前激活的 tab 页
 7       activeIndex: {
 8         get() {
 9           return this.$store.state.menu.activeIndex;
10         },
11         set(val) {
12           this.$store.dispatch('menu/setActiveIndex', val);
13         }
14       }
15     },

mounted: 

 1 mounted() {
 2         let options = JSON.parse(window.localStorage.getItem('menuOptions'))
 3         this.activeIndex = localStorage.getItem('menuIndex')
 4         if(!options) {
 5           options = []
 6           this.$router.push('/home')
 7           this.$store.commit('menu/SET_ACTIVEI_NDEX', options.route)
 8           // this.$store.dispatch('menu/setActiveIndex', options.route)
 9           }else {
10             this.$store.commit('menu/SET_OPTIONS', options)
11           }
12           //this.$store.dispatch('menu/setActiveIndex', options.route)
13           //this.$store.commit('menu/SET_OPTIONS', options)
14         // 设置当前激活的路由
15         if (options && options.length >= 1) {
16           for(var i = 0; i < options.length; i++){
17             if(options[i].route == this.activeIndex){
18               this.$store.dispatch('menu/setActiveIndex', options[i].route)
19               
20             }
21           }
22         }else{
23           this.$router.push('/home')
24         }
25        },

store/menu.js

 1 const state = {
 2     options: [{ route: '/home', name: '首页' }],
 3     activeIndex: '/home'
 4 }
 5 const mutations = {
 6     SET_OPTIONS: (state, data) => {
 7         state.options = data
 8     },
 9     // 添加 tabs
10     ADD_TABS: (state, data) => {
11         //state.options.findIndex(m => m.name === data.name) < 0 && state.options.push(data)
12         state.options.push(data);
13         localStorage.setItem("menuOptions", JSON.stringify(state.options))
14     },
15     // 删除 tabs
16     DELETE_TABS: (state, route) => {
17         let index = 0;
18         for (let option of state.options) {
19             if (option.route === route) {
20                 break;
21             }
22             index++;
23         }
24         state.options.splice(index, 1);
25         localStorage.setItem("menuOptions", JSON.stringify(state.options))
26     },
27     // 设置当前激活的 tab,route
28     SET_ACTIVEI_NDEX: (state, index) => {
29         state.activeIndex = index;
30         localStorage.setItem("menuIndex", state.activeIndex)
31     },
32 }
33 const actions = {
34     addTabs({ commit }, info) {
35         commit('ADD_TABS', info)
36     },
37     deleteTabs({ commit }, info) {
38         commit('DELETE_TABS', info)
39     },
40     setActiveIndex({ commit }, info) {
41         commit('SET_ACTIVEI_NDEX', info)
42     },
43 }
44 
45 
46 export default {
47     namespaced: true,
48     state,
49     mutations,
50     actions
51 }

over!