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

前端  /  管理员 发布于 4年前   586

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

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

关键逻辑

• 使用 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 标签栏组件，在主容器引用

路由控制通过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 变量来及时清理关闭页面的缓存

总结

以上所述是小编给大家介绍的Vue + Elementui实现多标签页共存的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

• 如何在Vue.js中实现标签页组件详解
• vue.js实现标签页切换效果
• Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
• vue-router实现tab标签页（单页面）详解
• 详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）
• VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
• VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法