wpf 判断menu是否选中_vueelementadmin源码解读之Siderbar侧边栏menu

前文补充，vue-element-admin光用户密码登录是进不了后台的，需要返回角色信息，所以这里我们在讲权限控制之前先用vue-admin-template来研究源码。

vue-element-admin源码解读之Siderbar侧边栏logo

2020-07-06

上文我们已经对logo进行了详细的分析，通过分析源码可以看出这个logo还是比较简单的，充分体现了vue组件化的思想，这节课我们继续，来分析menu。

<el-scrollbar wrap-class="scrollbar-wrapper">
  <el-menu
    :default-active="activeMenu"
    :collapse="isCollapse"
    :background-color="variables.menuBg"
    :text-color="variables.menuText"
    :unique-opened="false"
    :active-text-color="variables.menuActiveText"
    :collapse-transition="false"
    mode="vertical"
  >
    for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />el-menu>el-scrollbar>

可以看到el-menu被一个el-scrollbar标签包裹，这个标签瞅着前缀很像是element的内容，但如果你去翻看手册的话是找不到这个标签的任何内容，可是这个确实是element的一个标签，实现的是滚动条效果，只不过不知何缘故没有写进手册

我们重点来看el-menu组件，框架自定义了一些props，我们来逐一分析。

:default-active="activeMenu"，当前激活菜单的index，这里使用函数获取的：

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
},

这个函数也是比较简单，就是从当前路由中获取到meta.activeMenu或者path，path这个比较容易理解，meta的用法可能比较少，这块可以看手册——元信息，可以利用meta字段来进行一些权限的判断(比如是否需要权限)。

:collapse="isCollapse"是否水平收起菜单，这个函数我们在之前已经学过了。

:background-color="variables.menuBg":text-color="variables.menuText":active-text-color="variables.menuActiveText" 这三个props分别表示菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。再看源码，发现variables是一个函数，返回的是'@/styles/variables.scss'的内容。

:unique-opened="false":collapse-transition="false"
这两个props分别表示是否只保持一个子菜单的展开和是否开启折叠动画。

本文的内容是比较简单的，都是一些element的知识，下节课我们来啃框架的硬骨头——权限控制，大家记得把vue-element-admin安装好哦！

往期推荐

前后端分离之获取用户信息

2020-07-05

vue-element-admin之存储access_token(含源码分析)

2020-07-04

利用vue-element-admin/ui简单测试JWT

2020-07-03

对jwt-auth官方手册的一些修订(附完整代码)

2020-07-02