Vue+Elementsuiが複数のタブの共存を実現する方法

このテーマはもう一年前に作成されました。いくつかの内容も書きました。応用上の体験がいつまでも完璧ではないため、ずっと原稿だけを保管しています。
複数のプラットフォームの実践を経て、反復して、いくつかの機能が加えられてまた減って、最後にやはり最も簡素化されたバージョンに戻りました。ほとんどのシーンに適用されています。必要があれば、自分で拡張してもいいです。
肝心なロジック

は、各タブページ

をkeep-aliveを使用してキャッシュする。

は、ラベル情報

をvue-routerのbeforeEachによって更新する。

は、vuexを通じてラベル情報を保存する

。

は、vuexによって閉じられたページをキャッシュ

にキャッシュされないようにする。
コアコード
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によってラベル情報を更新します。

import Vue from 'vue'
 import VueRouter from 'vue-router'
 import store from '@/store'
 import Page from '../components/console/Page.vue'
 import My from '../components/console/My.vue'
 Vue.use(VueRouter)
 //        
 const routes = [
  {
   name: 'root',
   path: '/'
  },
  {
   path: '/page',
   component: Page,
   children: [
    {
     name: 'my',
     path: 'my',
     component: My,
     meta: {
      tabname: '    '
     }
    }
   ]
  }
 ]
 //      
 const router = new VueRouter({
  routes
 })
 router.beforeEach((to, from, next) => {
  next()
  store.dispatch('worktabRoute', {
   to: {
    name: to.name ? to.name : '',
    tabname: (to.meta && to.meta.tabname) ? to.meta.tabname : '',
    path: to.path
   },
   from: {
    name: from.name ? from.name : '',
    tabname: (from.meta && from.meta.tabname) ? from.meta.tabname : '',
    path: from.path
   }
  })
  return
 })
 export default router

主容器はクローズンパge変数により、ページを閉じるキャッシュを適時に整理します。

<template>
  <div>
   <cp-worktab></cp-worktab>
   <div class="cp-content">
    <keep-alive :exclude="closingPage">
     <router-view></router-view>
    </keep-alive>
   </div>
  </div>
 </template>
 <script>
 import Worktab from '../module/Worktab'
 export default {
  components: {
   cpWorktab: Worktab
  },
  data () {
   return {}
  },
  computed: {
   closingPage () {
    return this.$store.state.closingPage
   }
  }
 }
 </script>

締め括りをつける
以上は小编が皆さんに绍介したVue＋Elementsuiのラベルの共存方法です。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。