element admin 动态路由_vue登录功能实现（二）：动态路由、侧边栏和面包屑导航...

最新推荐文章于 2024-04-07 17:08:21 发布

weixin_39683368

最新推荐文章于 2024-04-07 17:08:21 发布

阅读量651

点赞数

文章标签： element admin 动态路由 layui导航栏不跳转切换内容 qt实现侧边导航栏 shiro+vue实现登录 vue + element 顶部二级菜单 vue element admin 二次开发

内容提要：

动态路由实现逻辑、sidebar侧边栏和面包屑导航。

动态路由

在vue-element-admin的基础上进行二次开发。

动态路由生成逻辑如下图：

vue-element-admin 将路由分为：constantRoutes 和 asyncRoutes
用户登录系统时，会动态生成路由，其中 constantRoutes 必然包含，asyncRoutes 会进行过滤；
asyncRoutes 过滤的逻辑是看路由下是否包含 meta 和 meta.roles 属性，如果没有该属性，所以这是一个通用路由，不需要进行权限校验；如果包含 roles 属性则会判断用户的角色是否命中路由中的任意一个权限，如果命中，则将路由保存下来，如果未命中，则直接将该路由舍弃；
asyncRoutes 处理完毕后，会和 constantRoutes 合并为一个新的路由对象，并保存到 vuex 的 permission/routes 中；
用户登录系统后，侧边栏会从 vuex 中获取 state.permission.routes，根据该路由动态渲染用户菜单。

sidebar侧边栏

在vue-element-admin的基础上进行二次开发。

sidebar 引用自 layout 组件，layout 组件位于 src/layout/index.vue
sidebar 组件源码位于 src/layout/components/Sidebar/index.vue

侧边栏示例代码

<template>
<el-row class="tac">
<el-col :span="12">
<el-menudefault-active="1-1"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"mode="vertical"unique-opened:collapse="isCollapse":collapse-transition="false"class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
      >
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location">i>
<span>导航一span>
template>
<el-menu-item-group>
<template slot="title">分组一template>
<el-menu-item index="1-1">选项1el-menu-item>
<el-menu-item index="1-2">选项2el-menu-item>
el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3el-menu-item>
el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4template>
<el-menu-item index="1-4-1">选项1el-menu-item>
el-submenu>
el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu">i>
<span slot="title">导航二span>
template>
<el-menu-item index="2-1">选项2-1el-menu-item>
el-submenu>
<el-menu-item index="3" disabled>
<i class="el-icon-document">i>
<span slot="title">导航三span>
el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting">i>
<span slot="title">导航四span>
el-menu-item>
el-menu>
el-col>
<el-col>
<el-button @click="isCollapse = !isCollapse">折叠el-button>
el-col>
el-row>
template>

<script>export default {
  data() {return {isCollapse: false
    }
  },methods: {
    handleSelect(key, keyPath) {console.log('handleSelect', key, keyPath)
    },
    handleOpen(key, keyPath) {console.log('handleOpen', key, keyPath)
    },
    handleClose(key, keyPath) {console.log('handleClose', key, keyPath)
    }
  }
}script>

el-menu解析

el-menu 表示菜单容器组件。它的插槽可以包含el-submenu和el-menu-item。el-submenu表示子菜单容器，el-menu-item是独立菜单项。

default-active：激活的菜单，注意如果存在子菜单，需要填入子菜单 ID
background-colo：背景色
text-color：文本颜色
active-text-color：激活文本颜色
unique-opened：是否保持一个菜单打开
mode：菜单模式。枚举值，分为 vertical(垂直) 和 horizontal(水平) 两种
collapse：是否水平折叠收起菜单(仅在 mode 为 vertical 时可用)
collapse-transition：是否显示折叠动画
@select：点击菜单事件，keyPath 代表菜单的访问路径，如：1-4-1 菜单的点击日志为：
```
handleSelect 1-4-1 (3) ["1", "1-4", "1-4-1"]
```
@open：父菜单打开时触发事件
@close：父菜单关闭时触发事件

el-submenu

表示子菜单容器，el-menu 表示整个菜单，而 el-submenu 表示一个具体菜单，只是该菜单还包含了子菜单。

el-submenu中可以放三种组件：

el-menu-item-group：菜单分组，为一组菜单添加一个标题，el-menu-item-group 容器内容需要存放 el-menu-item 组件，支持通过 title 的 slot 来定制标题样式
el-submenu：el-submenu 支持循环嵌套 el-submenu，这使得超过两级子组件得以实现
el-menu-item：子菜单组件

面包屑导航

el-breadcrumb：面包屑导航容器，通过separator 控制面包屑导航文本中分割线样式。
el-breadcrumb-item：面包屑子项目，可以使用 to 属性切换路由，slot 中可以包含 a 标签来跳转到外链。

代码示例

<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页el-breadcrumb-item>
<el-breadcrumb-item><a href="/">活动管理a>el-breadcrumb-item>
<el-breadcrumb-item>活动列表el-breadcrumb-item>
<el-breadcrumb-item>活动详情el-breadcrumb-item>
el-breadcrumb>