添加菜单(侧边栏)
/src/router/index.js
:编辑此文件,需在文件中指定菜单名称(name),菜单路径(path),菜单重定向路径(redirect)。对于子菜单项,还要指定菜单的页面(component)
1、constantRoutes
: 代表那些不需要动态判断权限的路由,如登录页、404等通用页面。
export const constantRouterMap = [{
path: '/404',
component: () => import('@/views/404'),
hidden: true
}]
2、asyncRoutes
: 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。
export const asyncRouterMap = [{
path: '/table',
component: Layout,
redirect: '/table/table',
name: 'Table',
meta: {
title: 'Table', //设置该路由在侧边栏中展示的名字
icon: 'table' //设置该路由的图标
},
children: [{
path: 'table',
component: () => import('@/views/table/table/index'), // Parent router-view
name: 'Table',
meta: {
title: 'Table'
}
},
{
path: 'tab',
component: () => import('@/views/table/tab/index'),
name: 'Tab',
meta: {
title: 'Tab'
}
}
]
}]
注:
在 Sidebar 中已经帮你做了判断,当你一个路由下面的 children 声明的路由大于>1 个时,自动会变成嵌套的模式。如果子路由正好等于一个就会默认将子路由作为根路由显示在侧边栏中,若不想这样,可以通过设置在根路由中设置alwaysShow: true来取消这一特性。
hidden: true 当设置 true 的时候该路由不会再侧边栏出现 如401,login等页面(默认 false)
alwaysShow: true 如果设置为true,则始终显示根菜单,无论其子路由的长度如何。
如果未设置AlwaysShow,则子级下只能有一个以上的路由
它将成为嵌套模式,否则不显示根菜单
参考文章:
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html#配置项