示例：
{
path: '/permission',
component: Layout,
redirect: '/permission/index', //重定向地址，在面包屑中点击会重定向去的地址
hidden: true, // 不在侧边栏显示
alwaysShow: true, //一直显示根路由
meta: { roles: ['admin','editor'] }, //你可以在根路由设置权限，这样它下面所有的子路由都继承了这个权限
children: [{
path: 'index',
component: ()=>import('permission/index'),
name: 'permission',
meta: {
title: 'permission',
icon: '#iconquanxian', //图标,不要忘记#
roles: ['admin','editor'], //或者你可以给每一个子路由设置自己的权限
noCache: true // 不会被 缓存
}
}]
}
这里的路由分为两种，constantRoutes和 asyncRoutes。
constantRoutes： 代表那些不需要动态判断权限的路由，如登录页、404、等通用页面。
asyncRoutes： 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。
具体的会在 权限验证 页面介绍。
路由写在前端：
这里做了一个小处理，路由都写在 @/router/index.js不利于合作开发，容易冲突。
利用webpack 分别加载了 constantRoutes和 asyncRoutes。
只需要在文件夹内新建自己路由即可。
不明白的可以查看 require.context API
const asyncFiles = require.context('./permissionModules', true, /.ts$/)
let permissionModules: Array = []
asyncFiles.keys().forEach((key) => {
if (key === './index.ts') return
permissionModules = permissionModules.concat(asyncFiles(key).default)
})
export const asyncRoutes: Array = [
...permissionModules
]
项目侧边栏主要基于 element-plus 的 el-menu 改造。
主要是有下面几个文件组成：
-
Index.vue （主文件）
-
SidebarItem.vue (侧边栏item定制，需要单独抽出来，多级路由嵌套需要它来递归)
-
SidebarItemLink.vue (嵌套在SidebarItem 的上一层，区分外链和路由跳转)
-
SidebarLogo.vue (侧边栏最上部的logo，可以隐藏和显示)
Index.vue
通过vuex获取展示数据
const routes = computed(() => {
return store.state.permission.routes
})
element-plus侧边栏风格配置
<el-menu
//是否展开
:collapse="!isCollapse"
//是否只保持一个子菜单的展开。
:unique-opened="false"
//默认选中
:default-active="activeMenu"
//背景颜色
:background-color="variables.menuBg"
//文字颜色
:text-color="variables.menuText"
//文字高亮颜色
:active-text-color="menuActiveTextColor"
mode="vertical"
//单独抽取，方便递归
<SidebarItem
v-for="route in routes"
:key="route.path"
:item="route"
:base-path="route.path"
:is-collapse="isCollapse"
/>
SidebarItem.vue
路由嵌套
结尾
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。
