Vue + Elementui实现多标签页共存的方法

这个主题，早在一年前就已经创建，也写了一些内容，碍于在应用上体验始终不够完美，一直只存着草稿。

经过多个平台实践，多次迭代，一些功能加了又减了，最后还是回归了最精简的版本，已适用于大部分的场景，若有需要，可自行扩展。

关键逻辑

核心代码

定义 vuex 的跨页变量（store/index.js)

import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({  state: {   worktab: {    list: [     {      name: 'my',      tabname: '主页',      path: '/page/my'     }    ],    current: {     name: 'my',     tabname: '主页',     path: '/page/my'    }   },   closingPage: ''  },  mutations: {   worktabRemove (state, p) {    // 关闭标签    let ind = state.worktab.list.findIndex(s => s.name === p)    if (ind > -1) {     // 清理 keep alive - start     state.closingPage = state.worktab.list[ind].name     // 清理 keep alive - end     state.worktab.list.splice(ind, 1)    }    if (p === state.worktab.current.name) {     // 是当前页，返回上一页     router.back()    }   },   worktabRoute (state, p) {    let ind = state.worktab.list.findIndex(s => s.name === p.to.name)    if (ind > -1) {     // 标签已存在     state.worktab.current = state.worktab.list[ind]    } else {     // 标签不存在，现在新建     state.worktab.list.push(p.to)     state.worktab.current = p.to    }    state.closingPage = ''   }  },  actions: {   worktabRemove ({commit}, p) {    commit('worktabRemove', p)   },   worktabRoute ({commit}, p) {    commit('worktabRoute', p)   }  },  strict: debug })

定义 worktab 标签栏组件，在主容器引用

<template>  <div class="cp-worktab">   <el-tabs v-model="activeTab" type="card" @tab-remove="removeTab" @tab-click="clickTab">    <el-tab-pane     v-for="t in worktabs"     :key="t.name"     :label="t.tabname"     :name="t.name"     :closable="t.name !== 'my'"    >    </el-tab-pane>   </el-tabs>  </div> </template> <script> export default {  created () {   // 进来不是主页时等list加载后再更新一次current   setTimeout(() => {    this.activeTab = this.$store.state.worktab.current.name   }, 500)  },  watch: {   '$store.state.worktab.current' (tab) {    this.activeTab = tab.name   }  },  computed: {   worktabs () {    return this.$store.state.worktab.list   }  },  data () {   return {    activeTab: 'name'   }  },  methods: {   clickTab (tab) {    this.$router.push(this.worktabs[1 * tab.index].path)   },   removeTab (name) {    this.$store.dispatch('worktabRemove', name)   }  } } </script>

路由控制通过beforeEach来更新标签信息