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

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

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

关键逻辑

使用 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> <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: 'https://www.jb51.net/' }, { 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

主容器通过 closingPage 变量来及时清理关闭页面的缓存

<template> <div> <cp-worktab></cp-worktab> <div> <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 + Elementui实现多标签页共存的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章: