這個主題，早在一年前就已經創建，也寫了一些內容，礙于在應用上體驗始終不夠完美，一直只存著草稿。

經過多個平臺實踐，多次迭代，一些功能加了又減了，最后還是回歸了最精簡的版本，已適用于大部分的場景，若有需要，可自行擴展。

關鍵邏輯

核心代碼

定義 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來更新標簽信息