vue登录功能实现(二):动态路由、侧边栏和面包屑导航

动态路由实现逻辑、sidebar侧边栏和面包屑导航。
189阅读 · 0评论 · 2020-9-7 23:16发布

动态路由

在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-menu
        default-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">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项1</el-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-1</el-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>

共有0 条评论

暂无评论