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

作者: 起舞弄清影yr | 来源:发表于2023-03-25 14:27 被阅读0次

Vue 后台管理项目8-侧边菜单的实现
如何在DOM元素加载完毕后执行js代码以及DOM加载过程
element-plus-Menu菜单-已绑定菜单的动态刷新问题
基于Angular2+的Tab页+侧边菜单比较完整的解决方案
谈谈动态路由
vue-project
django项目--菜单管理
C/C++ 动态库的生成
vue 根据菜单自动生成路由（动态配置前端路由）
VC动态生成菜单菜单响应及加速键的使用

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

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

生成测试页面和对应路由

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

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

暴露路由表，store引入

3. 在之前创建的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.png
<Menu-item组件中
:index="item.path=='/'?'/':basePath+'/'+item.path" 组件递归时，上级路由path+本级路由path；导致根路由/多次添加变成“///”所以这里进行判断处理