後臺管理外框架demo,由vue + seajs架構的後臺管理框架,頁面主要三部分組成:頭部、左側菜單、主界面。左側菜單以路由控制在主界面以tab頁形式展現。
seajs主要是用來作代碼組織的,方便模塊化加載。功能上實現主要是vue+elementUI+vuex。html
整個框架使用elementUI實現界面,導航使用的是左側菜單組件-NavMenu導航菜單
將左側菜單導航單獨作成一個組件。前端
<!--html--> <div class="app-nav-wrap"> //default-active設置當前激活的菜單。設置router使用 vue-router 的模式,啓用該模式會在激活導航時以 index 做爲 path 進行路由跳轉 <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router> //index設置的值爲path <el-menu-item v-for="menu in menus" :index="menu.route" :key="menu.route" v-if="!menu.children"> <i class="el-icon-menu"></i>{{menu.name}} </el-menu-item> <el-submenu v-for="menu in menus" :index="menu.route" :key="menu.route" v-if="menu.children"> <template slot="title"><i class="el-icon-menu"></i>{{menu.name}}</template> <el-menu-item :index="item.route" v-for="item in menu.children" :key="item.route"> <i class="el-icon-location"></i>{{item.name}}</el-menu-item> </el-submenu> </el-menu> </div> <!--菜單組件的js--> //系統的菜單數據,渲染頁面顯示,靈活增刪菜單 //route做爲路徑設置,name做爲菜單名稱顯示,children做爲是否有子菜單的判斷。 data() { return { menus: [ { route: '/', name: '首頁' , children:false}, { route: '/user', name: '用戶管理' , children:false}, { route: '/psd', name: '密碼管理' , children:false}, { route: '/salary', name: '工資管理' , children:false}, { route: '/attendence', name: '考勤管理' , children:false}, { route: '/perform', name: '績效考覈', children: [{ route: '/month', name: '月度績效' }, { route: '/year', name: '年度績效' }] }, { route: '/admin', name: '系統管理' , children:false}, { route: '/feedback', name: '意見反饋' , children:false} ] } },
路由應該與上面組件中顯示的對應,不然不會跳轉。vue
<!--路由設置--> const router = new VueRouter({ routes: [ { path: '/', name: '首頁', component: main, children: [ { path: '/user', name: '用戶管理', component: ElementTable, }, { path: '/userInfo/:id', name: '用戶詳情頁', component: DetailInfo }, { path: '/psd', name: '密碼管理', component: Template }, { path: '/salary', name: '工資管理', component: Template }, { path: '/attendence', name: '考勤管理', component: Template }, { path: '/perform', name: '績效考覈', component: Template, children:[ { path: '/month', name: '月度績效', component: Monthform }, { path:'/year', name: '年度績效', component: Theform } ] }, { path: '/admin', name: '系統管理', component: Template }, { path: '/feedback', name: '意見反饋', component: Template } ] }, { path: '*', redirect: '/' } ] });
以上實現點擊菜單項頁面跳轉到對應的路由頁面。git
在框架組件中,採用watch監聽頁面路由改變(即點擊菜單操做),新增路由添加tab頁,點擊已打開的路由則跳轉到相應的tab頁。github
watch: { '$route'(to) { let flag = false;//判斷是否頁面中是否已經存在該路由下的tab頁 //options記錄當前頁面中已存在的tab頁 for (let option of this.options) { //用名稱匹配,若是存在即將對應的tab頁設置爲active顯示桌面前端 if (option.name === to.name) { flag = true; this.$store.commit('set_active_index', '/' + to.path.split('/')[1]); break; } } //若是不存在,則新增tab頁,再將新增的tab頁設置爲active顯示在桌面前端 if (!flag) { this.$store.commit('add_tabs', { route: '/' + to.path.split('/')[1], name: to.name }); this.$store.commit('set_active_index', '/' + to.path.split('/')[1]); } } }
來看一下框架組件的html,將菜單組件app-nav引入,主界面爲tab欄。
使用elementUI的tab組件,綁定activeIndex爲激活tab頁顯示在桌面前端,利用for循環options顯示全部已打開的tab頁。vue-router
<div class="main"> <div class="app-header"> <div class="title">後臺管理系統</div> </div> <div class="app-content"> <div class="app-nav"> <app-nav></app-nav> </div> <div class="app-wrap"> <!-- 此處放置el-tabs代碼 --> <div class="template-tabs"> <el-tabs v-model="activeIndex" type="border-card" closable @tab-click="tabClick" v-if="options.length" @tab-remove="tabRemove"> <el-tab-pane :key="item.name" v-for="(item, index) in options" :label="item.name" :name="item.route"> </el-tab-pane> </el-tabs> </div> <div class="content-wrap"> <keep-alive> <router-view/> </keep-alive> </div> </div> </div> </div>
綁定兩個主要函數:vuex
methods: { // tab切換時,動態的切換路由 tabClick(tab) { let path = this.activeIndex; // 用戶詳情頁的時候,對應了二級路由,須要拼接添加第二級路由 if (this.activeIndex === '/userInfo') { path = this.activeIndex + '/' + this.$store.state.userInfo.name; } this.$router.push({ path: path });//路由跳轉 }, tabRemove(targetName) { // 首頁不可刪除 if (targetName == '/') { return; } //將改tab從options裏移除 this.$store.commit('delete_tabs', targetName); //還同時須要處理一種狀況當須要移除的頁面爲當前激活的頁面時,將上一個tab頁做爲激活tab if (this.activeIndex === targetName) { // 設置當前激活的路由 if (this.options && this.options.length >= 1) { this.$store.commit('set_active_index', this.options[this.options.length - 1].route); this.$router.push({ path: this.activeIndex }); } else { this.$router.push({ path: '/' }); } } } }, computed: { options() { return this.$store.state.options; }, //動態設置及獲取當前激活的tab頁 activeIndex: { get() { return this.$store.state.activeIndex; }, set(val) { this.$store.commit('set_active_index', val); } } }
上述邏輯中採用了vuex存儲tab數據,options維護一個數組,存儲已經打開的tab頁,activeIndex保存當前激活的tab頁。數組
add_tabs:添加新的tab頁,向options數組中添加新數據。架構
delete_tabs:關閉tab頁,並將其從options數組中移除。app
/** * Vuex全局狀態管理 * @param options {Array} 用於渲染tabs的數組 */ const store = new Vuex.Store({ state: { options: [], activeIndex: '/user' }, mutations: { // 添加tabs add_tabs(state, data) { this.state.options.push(data); }, // 刪除tabs delete_tabs(state, route) { let index = 0; for (let option of state.options) { if (option.route === route) { break; } index++; } this.state.options.splice(index, 1); }, // 設置當前激活的tab set_active_index(state, index) { this.state.activeIndex = index; }, } });