大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
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 标签栏组件,在主容器引用
路由控制通过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实现多标签页共存的方法的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!