优化刷新页面设置默认菜单

Author: tangJunGit

index.html

@@ -13,7 +13,7 @@
  <pre style='text-align:center;background-color:#ccc; height:100%;border:0;position:fixed;top:0;left:0;width:100%;z-index:1234'>
  <h2 style='padding-top:200px;margin:0'>
  <strong>你的浏览器版本太low了，已经和时代脱轨了 :(</strong>
- <strong>请升级浏览器版本，或者下载谷歌浏览器，火狐浏览器等现代浏览器</strong>
+ <strong>请升级浏览器版本，或者下载谷歌浏览器、火狐浏览器等现代浏览器</strong>
  </h2>
  </pre>
  <![endif]-->

src/router/index.js

@@ -12,15 +12,19 @@ export default new Router({
  { path: '/', redirect: '/error/404' },
  { 
  path: '/demo/list', name: 'demoList', component: _import('demo/list'), 
- meta: {title: '学校信息', location: ['教务管理', '学校管理', '学校信息']} // title 为路由tab的标题，location表示位置
+ meta: {title: ['学校管理', '学生管理', '学生信息']} // title 表示菜单位置，需要自定义
+ },
+ { 
+ path: '/demo/add', name: 'demoAdd', component: _import('demo/add'), 
+ meta: {title: ['学校管理', '学生管理', '添加学生']} 
  },
  { 
  path: '/demo/test_1', name: 'test_1', component: _import('demo/test_1'), 
- meta: {title: '测试1', location: ['测试1', '测试2']} 
+ meta: {title: ['学校管理', '班级管理']} 
  },
  { 
  path: '/demo/test_2', name: 'test_2', component: _import('demo/test_2'), 
- meta: {title: '测试2', location: ['测试1', '测试2']}
+ meta: {title: ['教务管理', '学年学期']}
  },
  ]
  },

src/store/modules/menu-list.js

@@ -1,25 +1,56 @@
 import { MENU_LIST } from '../mutations'
 
+function getMatchMenu(menuList, currentMenuName) {
+ let node = null; // 获取的子节点
+ let code = 'label'; // 匹配的属性
+ let children = 'children'; // 包含子节点的属性
+
+ /**
+ * 根据 NodeID 查找当前节点以及父节点
+ * json 数据源
+ * nodeId 匹配的值
+ */
+ let getNode = (json, nodeName) => { 
+ for (let i = 0; i < json.length; i++) {
+ let obj = json[i];
+ // if (!nodeName) break;
+ // if (!obj || !obj[code]) continue;
+ if (obj[code] == nodeName) {
+ node = obj;
+ break;
+ } else {
+ if (obj[children]) {
+ getNode(obj[children], nodeName);
+ } else {
+ continue;
+ }
+ }
+ }
+ return node;
+ }
+
+ return getNode(menuList, currentMenuName);
+};
+
+
 const state = {
  list: [
- { moduleName: '学校管理', menuList: []},
- { moduleName: '教务管理', menuList: [
+ { moduleName: '学校管理', menuList: [
  { index: '1', label: '学生管理', children: [
- { index: '1-1', label: '学生信息', name: 'demoList', path: '/demo/list' }, // 注意：必须与路由router的name、path对应
- { index: '1-2', label: 'test', children: [
- { index: '1-2-1', label: 'test_1', name: 'test_1', path: '/demo/test_1' }
- ]}]
- }
+ { index: '1-1', label: '学生信息', path: '/demo/list' },
+ { index: '1-2', label: '添加学生', path: '/demo/add'}]
+ },
+ { index: '2', label: '班级管理', path: '/demo/test_1'}
  ]},
- { moduleName: '教职工管理', menuList: [
- { index: '1', label: '学生管理', children: [
- { index: '1-1', label: 'test_2', name: 'test_2', path: '/demo/test_2' }]
- }
+ { moduleName: '教务管理', menuList: [
+ { index: '1', label: '学年学期', path: '/demo/test_2'}
  ]},
+ { moduleName: '教职工管理', menuList: []},
  { moduleName: '行政办公', menuList: []},
  ],
  activeModuleName: '',
- activeMenuIndex: '-1'
+ activeMenuIndex: '-1',
+ activeMenuName: '',
 
 }
 
@@ -43,7 +74,16 @@ const mutations = {
  // 设置当前菜单的index
  [MENU_LIST.SET_ACTICE_MENU_INDEX] (state, menuIndex) {
  state.activeMenuIndex = menuIndex;
- },
+ },
+ // 设置当前菜单的name，设置index
+ [MENU_LIST.SET_ACTICE_MENU_NAME] (state, menuName) {
+ state.activeMenuName = menuName;
+ 
+ // 设置当前菜单的index
+ let menuList = getters.menuList();
+ let current = getMatchMenu(menuList, state.activeMenuName);
+ state.activeMenuIndex = current.index;
+ },
  }
 
 export default {

src/store/modules/router-tab.js

@@ -1,8 +1,8 @@
 import { ROUTER_TAB } from '../mutations'
 
 const state = {
- openTab:[], //所有打开的路由
- activeIndex: '' //激活状态
+ openTab:[], //所有打开的路由 - openTab 为 router对象的数组
+ activeIndex: '' // 激活状态 - activeIndex 为 path 路径
 }
 
 const mutations = {

src/store/mutations.js

@@ -12,5 +12,6 @@ export const ROUTER_TAB = {
 export const MENU_LIST = {
  SET_ACTICE_MODULE_NAME: 'set_active_module_name',
  SET_ACTICE_MENU_INDEX: 'set_active_menu_index',
+ SET_ACTICE_MENU_NAME: 'set_active_menu_name',
 }
 

src/views/common/menuAside.vue

@@ -6,7 +6,7 @@
  </div>
  <!-- 菜单列表 -->
  <div v-if="loading">
- <el-menu class="menu-list" :default-active="activeMenu" :collapse="isCollapse">
+ <el-menu class="menu-list" :default-active="activeMenuIndex" :collapse="isCollapse">
  <MenuTree :menuLIst="menuLIst" @clickMenuItem="clickMenuItem"></MenuTree>
  </el-menu>
  </div>
@@ -28,18 +28,21 @@ export default {
  }
  },
  created(){
- this.activeMenu = '1-1';
+ // 刷新页面，通过路由(meta > title)设置模块名与菜单名
+ let routeMeta = this.$route.meta;
+ this.moduleName = routeMeta.title[0]; // 当前模块名
+ this.activeMenuName = routeMeta.title[routeMeta.title.length - 1]; // 当前菜单名
  },
  methods: {
  // 点击菜单的跳转，改变菜单index值
  clickMenuItem(menuItem){
- this.activeMenu = menuItem.index;
+ this.activeMenuIndex = menuItem.index;
  this.$router.push(menuItem.path);
  }
  },
  watch:{
- activeMenu(newVal){
-  // 当切换模块时，菜单index === '-1'，重新渲染菜单列表
+ // 当切换模块时，菜单index === '-1'，重新渲染菜单列表
+ activeMenuIndex(newVal){
  if(newVal === '-1'){
  this.loading = false;
  this.$nextTick(() => {
@@ -49,19 +52,32 @@ export default {
  }
  },
  computed: {
- moduleName() {
- return this.$store.state.menuList.activeModuleName; 
+ moduleName: {
+ get() {
+ return this.$store.state.menuList.activeModuleName;
+ },
+ set(val) {
+ this.$store.commit(MENU_LIST.SET_ACTICE_MODULE_NAME, val);
+ }
  },
  menuLIst(){
  return this.$store.getters.menuList; 
  },
- activeMenu: {
+ activeMenuIndex: {
  get () {
  return this.$store.state.menuList.activeMenuIndex;
  },
  set (val) {
  this.$store.commit(MENU_LIST.SET_ACTICE_MENU_INDEX, val);
  }
+ },
+ activeMenuName: {
+ get () {
+ return this.$store.state.menuList.activeMenuName;
+ },
+ set (val) {
+ this.$store.commit(MENU_LIST.SET_ACTICE_MENU_NAME, val);
+ }
  }
  },
  components: {

src/views/common/navigationBar.vue

@@ -33,12 +33,6 @@ export default {
  default: false
  }
  },
- data() {
- return { }
- },
- created(){
- this.activeModuleName = '教务管理'; // 默认显示模块
- },
  methods:{
  collapse(){
  this.$emit('update:isCollapse', !this.isCollapse);

src/views/common/router-tab.vue

@@ -1,10 +1,10 @@
 <template>
  <div class="router-tabs-theme t-tabs">
  <el-tabs v-model="activeIndex" v-if="openTab.length" type="border-card" closable @tab-click='tabClick' @tab-remove='tabRemove'>
- <el-tab-pane :key="item.name" v-for="(item) in openTab" :label="item.meta.title" :name="item.path">
+ <el-tab-pane :key="item.name" v-for="(item) in openTab" :label="item.meta.title[item.meta.title.length-1]" :name="item.path">
  <span>当前位置：</span>
  <el-breadcrumb separator=">" class="t-breadcrumb">
- <el-breadcrumb-item v-for="(item, index) in item.meta.location" :key="index">{{item}}</el-breadcrumb-item>
+ <el-breadcrumb-item v-for="(item, index) in item.meta.title" :key="index">{{item}}</el-breadcrumb-item>
  </el-breadcrumb>
  </el-tab-pane>
  </el-tabs>
@@ -13,9 +13,6 @@
 <script>
 import { ROUTER_TAB } from "../../store/mutations.js";
 export default {
- data(){
- return{}
- },
  created() {
  // 刷新时以当前路由做为 tab 加入tabs
  this.routerAdd(this.$route);
@@ -48,6 +45,8 @@ export default {
  },
  watch:{
  '$route'(to,from){
+ console.log(this.$router);
+ 
  // flag 判断路由是否已经tab打开
  let flag = false;
  for(let item of this.openTab){

src/views/demo/add.vue

@@ -0,0 +1,5 @@
+<template>
+ <div>
+ 添加学生
+ </div>
+</template>

src/views/demo/test_1.vue

@@ -1,5 +1,5 @@
 <template>
  <div>
- test1
+ 班级管理
  </div>
 </template>