<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>

  // 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')

           }

         }

       }

 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() {

         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')

         }

        },

 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

 }