Vue + Elementui實現(xiàn)多標簽頁共存的方法?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
成都創(chuàng)新互聯(lián)堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的友誼網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
關(guān)鍵邏輯
使用 keep-alive 來緩存各標簽頁
通過 vue-router 的 beforeEach 方法來更新標簽信息
通過 vuex 來保存標簽信息
通過 vuex 來使關(guān)閉頁不被緩存
核心代碼
定義 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) { // 關(guān)閉標簽 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 { // 標簽不存在,現(xiàn)在新建 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) // 關(guān)聯(lián)路由與組件 const routes = [ { name: 'root', path: '/' }, { path: '/page', component: Page, children: [ { name: 'my', path: 'my', component: My, meta: { tabname: '個人主頁' } } ] } ] // 創(chuàng)建路由器 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 變量來及時清理關(guān)閉頁面的緩存
<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>
看完上述內(nèi)容,你們掌握Vue + Elementui實現(xiàn)多標簽頁共存的方法的方法了嗎?如果還想學到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
名稱欄目:Vue+Elementui實現(xiàn)多標簽頁共存的方法
轉(zhuǎn)載來源:http://muchs.cn/article36/ghgosg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、網(wǎng)站收錄、全網(wǎng)營銷推廣、搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)