The switching element UI tab bar

html code :( with the el-tab assembly)

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   // When the tab to switch dynamic routing switch 
2        tabClick (tab) {
 . 3          the this $ router.push ({.
 . 4            path: the this .activeIndex
 . 5          }); // routing jump 
. 6        },
 . 7  
. 8  
. 9  tabRemove (the targetName ) {
 10          the this $ store.dispatch (. ' MENU / deleteTabs ' , the targetName);
 . 11          // when needed while also handling a situation when it is desired to remove the currently active page is a page, the page on a tab as an activation tab 
12 is          IF ( the this .activeIndex === the targetName) {
 13 is            // 设置当前激活的路由
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       }

Data is stored in vuex in:

. 1  computed: {
 2        Options: {
 . 3          GET () { return  the this $ store.state.menu.options},.
 . 4          SET (Val) { the this $ store.dispatch (. ' MENU / addTabs ' , Val)}
 . 5        } ,
 6        // dynamically set and get the current active page tab 
. 7        activeIndex: {
 . 8          GET () {
 . 9            return  the this . $ store.state.menu.activeIndex;
 10          },
 . 11          sET (Val) {
 12 is            the 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!