Vue-根据角色生成动态路由及菜单-3-根据路由表生成导航菜单

311 阅读3分钟

这一篇继续记录生成测试页面、路由表、根据store中routes生成导航菜单。

  1. 按照本测试项目左侧菜单结构在views目录下生成对应页面组件,同时在router/index.js中添加对应路由规则,路由表中meta用于后面生成菜单时的icon图标和权限控制,这里可以先不管。图中框起的监控总菜单为示例 页面菜单-views下页面组件-对应路由 3者间关系,“配置”总菜单类似。

生成测试页面和对应路由

  1. 上面把测试页面都准备好了,现在处理根据路由表生成左侧菜单。

按照需不需要权限控制,把所有路由表分成2块:constantRoutes表示不需要权限控制能直接访问的页面(该测试项目只有/login不需要),asyncRoutes表示需要权限控制的页面(把/404和 * 两个路由放到数组最后)(操作之后只有/login能访问了,访问其他路由将是空白页)。并export暴露出去,使用vuex引入这两块路由,方便处理动态路由和生成动态菜单。这一步为了测试暂时把new VueRouter时挂载的routes为所有路由,Store中routes也为所有路由,后续将根据用户角色修改这2处。

暴露路由表,store引入

  1. 在之前创建的layout目录的SideBar组件中引用store中的routes,并生成需要的路由结构。

这一步涉及组件递归和点击跳转,在工作的项目中首次处理时没有思绪花费了大量时间,后续看网上各大神的文章慢慢领悟便有了自己的思路。根据路由处理成菜单有多种实现思路,这里只是简单的实现。

菜单结构对应的组件

这里直接贴上菜单组件代码:

SideBar.vue:
<template>
  <div class="side-bar-container">
    <div class="logo-box">
      <i class="el-icon-eleme" />
      <span v-show="!isCollapse">Ele-admin</span>
    </div>
    <div class="collapse-icon">
      <i
        :class="[!isCollapse?'el-icon-s-fold':'el-icon-s-unfold']"
        @click="handleToggleSideBar"
      />
    </div>
    <el-menu
      background-color="#314151"
      text-color="#adb3b9"
      active-text-color="#fff"
      class="el-menu-vertical"
      :collapse="isCollapse"
      :router="true"
      :default-active="activeMenu"
      :unique-opened="false"
    >
      <SideBarItem
        v-for="item in routes"
        :key="item.name"
        :item="item"
        :base-path="item.path"
      />
    </el-menu>
  </div>

</template>

<script>
import { mapState } from 'vuex'
import SideBarItem from './SideBarItem.vue'
export default {
  components: {
    SideBarItem
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapState({
      isCollapse: state => state.app.sideBarIsCollapse,
      routes: state => state.routes
    }),
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  },
  methods: {
    handleToggleSideBar() {
      this.$store.commit('TOGGLE_SIDE_BAR')
    },
  }
}
</script>

<style lang="scss" scoped>
.side-bar-container{
    height: 100%;
    background-color: #314151;
    .logo-box{
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
        i{
            font-size: 26px;
        }
        span{
            margin-left: 8px;
        }
    }
    .collapse-icon{
        color: #999;
        background-color: #394c61;
        padding: 8px;
        display: flex;
        justify-content: center;
        i{
            cursor: pointer;
        }
    }
    .el-menu-vertical{
        // height: 100%;
        width: 100%;
        border-right: none !important;  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
        .el-submenu .el-menu-item{
            min-width: inherit !important;
        }
    }
}
</style>


SideBarItem.vue
<template>
  <div class="">
    <!-- route有children但是只需要显示一级的(如首页因为有layout需要children) -->
    <template v-if="!item.hidden && item.meta.notShowChildren">
      <MenuItem
        :item="item"
        :base-path="basePath"
      />
    </template>

    <el-submenu v-if="!item.hidden && ('children' in item) && !item.meta.notShowChildren" :index="item.path">
      <!-- 含有子菜单项目的标题 -->
      <template slot="title">
        <i :class="[item.meta.icon]" />
        <span slot="title">{{ item.name }}</span>
      </template>
      <!-- 子菜单下的每一小项目 且 该小项不含有children -->
      <MenuItem
        v-for="sonItem in item.children.filter(son=>!('children' in son))"
        :key="sonItem.name"
        :item="sonItem"
        :base-path="basePath"
      />
      <!-- 子菜单下的小项还有嵌套children -->
      <template v-if="item.children.some(son=>'children' in son)">
        <SideBarItem
          v-for="sonItem in item.children.filter(son=>'children' in son)"
          :key="sonItem.name"
          :item="sonItem"
          :base-path="basePath+'/'+sonItem.path"
        />
      </template>
    </el-submenu>

  </div>
</template>

<script>
import MenuItem from './MenuItem.vue'
import SideBarItem from './SideBarItem.vue'
export default {
  name: 'SideBarItem',
  components: {
    SideBarItem,
    MenuItem
  },
  props: ['item', 'basePath']
}
</script>

<style>

</style>


MenuItem.vue
<template>
  <el-menu-item v-if="!item.hidden" :index="item.path=='/'?'/':basePath+'/'+item.path">
    <i :class="[item.meta.icon]" />
    <span slot="title">{{ item.name }}</span>
  </el-menu-item>
</template>

<script>
export default {
  props: ['item', 'basePath']
}
</script>

<style>

</style>

这里需要注意的有下面几点:

  • <el-menu 组件中
    • :router="true"启用vue-router模式点击就能导航。需要结合 <el-menu 组件的:index属性绑定为路由path
    • :default-active="activeMenu"处理菜单高亮,直接用当前路由path;但是像/device/detail这类子页面因为路由表添加了hidden属性,并没有渲染到菜单栏中,所以用meta中的activeMenu属性(值为父级路由path)进行处理
  • <SideBarItem
    • :base-path="item.path"  该组件递归,base-path表示当前层的路由path
    • 递归的组件需要添加 name 属性,平时写组件时应该养成写name的习惯

递归组件必须添加 name

  • <Menu-item组件
    • :index="item.path=='/'?'/':basePath+'/'+item.path"   组件递归时,上级路由path+本级路由path;导致根路由/多次添加变成“///”所以这里进行判断处理

之后便能根据store中的routes循环生成多层次的导航菜单。

下篇文章继续记录用户登录拿到token和roles来过滤routes动态生成菜单,并添加permission.js用router.beforeEach拦截处理路由权限。