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

 更新时间:2019年06月12日 14:41:47   作者:关鑫贤  
这篇文章主要介绍了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 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

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

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

相关文章

  • Vue中ElementUI分页组件Pagination的使用方法

    Vue中ElementUI分页组件Pagination的使用方法

    这篇文章主要为大家详细介绍了Vue中ElementUI分页组件Pagination的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • vue2.0构建单页应用最佳实战

    vue2.0构建单页应用最佳实战

    这篇文章主要为大家分享了vue2.0构建单页应用最佳实战案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 样式穿透vue中的scoped详谈

    样式穿透vue中的scoped详谈

    这篇文章主要为大家介绍了样式穿透vue中的scoped示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 详解Vue2.0组件的继承与扩展

    详解Vue2.0组件的继承与扩展

    这篇文章主要介绍了详解Vue2.0组件的继承与扩展,主要分享slot、mixins/extends和extend的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue3如何利用自定义指令实现下拉框分页懒加载

    vue3如何利用自定义指令实现下拉框分页懒加载

    下拉框一开始请求第一页的内容,滚动到最后的时候,请求第二页的内容,如此反复,直到所有数据加载完成,这篇文章主要介绍了vue3如何利用自定义指令实现下拉框分页懒加载,需要的朋友可以参考下
    2024-07-07
  • vue下拉菜单组件(含搜索)的实现代码

    vue下拉菜单组件(含搜索)的实现代码

    这篇文章主要介绍了vue下拉菜单组件(含搜索)的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 在Vue中实现文件预览与打印的代码示例

    在Vue中实现文件预览与打印的代码示例

    在Vue应用中,有时我们需要实现文件预览和打印的功能,比如,我们可能需要预览并打印PDF文件、图片文件等,本文将介绍如何在Vue中实现文件预览和打印的功能,并提供相应的代码示例
    2023-06-06
  • vue-quill-editor+plupload富文本编辑器实例详解

    vue-quill-editor+plupload富文本编辑器实例详解

    这篇文章主要介绍了vue-quill-editor+plupload富文本编辑器实例详解,需要的朋友可以参考下
    2018-10-10
  • Vue中一个组件调用其他组件的方法详解(非父子组件)

    Vue中一个组件调用其他组件的方法详解(非父子组件)

    vue中最常见子父组件产值,大家一定都很熟悉,最近项目中碰到非父组件中调用子组件方法的问题,这篇文章主要给大家介绍了关于Vue中一个组件调用其他组件的方法(非父子组件),需要的朋友可以参考下
    2022-10-10
  • Vue如何使用CSS自定义变量

    Vue如何使用CSS自定义变量

    这篇文章主要介绍了Vue如何使用CSS自定义变量,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-05-05

最新评论