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

1 
     
      2    
      
       3    
      4 
     

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 页作为激活 tab12         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.activeIndex18             });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     // 添加 tabs10     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     // 删除 tabs16     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,route28     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     actions51 }

over!