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


Posted in Javascript onJune 12, 2019

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

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

关键逻辑

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

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 #Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 #jQuery
小程序组件之自定义顶部导航实例
Jun 12 #Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 #Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 #Javascript
详解如何提升JSON.stringify()的性能
Jun 12 #Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 #Javascript
You might like
PHP4实际应用经验篇(5)
2006/10/09 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
浅谈django的render函数的参数问题
2018/10/16 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Python如何使用字符打印照片
2020/01/03 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
自主招生自荐信
2013/12/08 职场文书
租房协议书范例
2014/10/14 职场文书
英语通知范文
2015/04/22 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers
php解析非标准json、非规范json的方式实例
2022/05/10 PHP