Vue + Elementui实现多标签页共存的方法
2019-06-12 14:41
2261 查看
这个主题,早在一年前就已经创建,也写了一些内容,碍于在应用上体验始终不够完美,一直只存着草稿。
经过多个平台实践,多次迭代,一些功能加了又减了,最后还是回归了最精简的版本,已适用于大部分的场景,若有需要,可自行扩展。
关键逻辑
- 使用 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 table表格数据 滚动懒加载的实现方法
- vue-element-UI中实现翻页改变索引index,修改页面显示item数量的方法
- 利用vue+elementUI实现部分引入组件的方法详解
- Vue+ElementUI实现表单动态渲染、可视化配置的方法
- vue.js与element-ui实现菜单树形结构的解决方法
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- [置顶] element-ui 表格实现单元格可编辑的方法
- vue + element-ui实现简洁的导入导出功能
- vue-cli + ElementUI 实现自定义接口上传图片
- 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(2)
- Vue+elementUI的this.$refs.对象名.方法名的理解
- Vue ElementUI Select 选择器实现动态options
- VUE 使用 element-ui 的 el-autocomplete 组件实现输入框自动提示查询功能 超简单!!!
- Vue2.0+ElementUI+PageHelper实现的表格分页
- vue实现a标签点击高亮方法
- vue实现element-ui对话框可拖拽功能
- vue中Element-ui 输入银行账号每四位加一个空格的实现代码
- vuedraggable+element ui实现页面控件拖拽排序效果
- Vue + Vue-router + Element-ui+axios 实现研究生管理系统中的“学生类型”(前端+后端数据)
- vue+elementui 表格展开行实现