No.13 vue-element-admin 学习使用（八）侧边栏和路由

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

之前学到了布局的整体结构，接下来分开学习每一个小组件的功能。首先是路由和侧边栏组件。

这个项目的侧边栏和路由绑定在一起的，在@/router/index.js中写路由，侧边栏就能动态生成了，

路由配置提供了很多配置项，例如 hidden， redirect, meta 等等。 简单的介绍一下，路由的配置项。

1.hidden为true 不会在侧边栏出现

2.redirect: 'noRedirect'在面包屑导航中不可被点击

3.alwaysShow 为true，在只有一个字路由时，仍然显示根路由，不进行自动替换

4.name 路由名，一定要填

5.meta.roles 权限， meta.title 侧边栏，面包屑的名字，meta.icon图标，meta.noCache不被keep-alive缓存，meta.breadcrumb false 不显示在面包屑中，meta.affix true 固定在tag-views里，meta.activeMenu 高亮对应的侧边栏

这样的效果。

这些配置项，几乎涵盖了所有常见的功能，很强力。

项目里的路由分为两种constantRoutes 和 asyncRoutes，constantRoutes是不需要权限的路由，例如登录页面，asyncRoutes是需要动态判断权限，通过addRoutes添加的路由。

然后学习侧边栏，本项目的侧边栏是用element的el-menu改的，由于支持路由无限嵌套，递归组件用到了@/layout/components/Sidebar，在Sidebar/index.vue中设置unique-opened为true，可以实现只有一个子菜单展开（手风琴效果）。

然后是nested 多级目录嵌套路由，没有太理解是什么意思，在什么情况下使用，是这样的效果。

点击侧边栏 刷新当前路由，之前讲过，不再赘述。

面包屑导航，在@/components/Breadcrumb#里，根据route的变化动态生成，

侧边栏滚动用到了el-scrollbar

支持在侧边栏打开外链

{
    path: 'external-link',
    component: Layout,
    children: [
      {
        path: 'https://github.com/PanJiaChen/vue-element-admin',
        meta: { title: 'externalLink', icon: 'link' }
      }
    ]
  },

侧边栏默认展开的路由，在@/layout/components/Sidebar/index.vue中 加入

:default-openeds="['/example','/nested']" // 添加本行代码

实现默认展开的功能。至此侧边栏和路由的使用学习结束。