路由与菜单

路由通常都和菜单绑定在一起，为了减少维护的量，我们直接通过路由表生成了菜单。

路由

首先，需要先了解一下路由表的配置。基本的路由配置请参阅 Vue-Router 官方文档

// 在本例子中，页面最终路径为 /dashboard/workplace
export default {
 path: 'dashboard',
 name: 'dashboard', // 路由名称
 component: () => import('@/views/dashboard/index.vue'),
 meta: {
   locale: 'menu.dashboard',
   requiresAuth: true,
   icon: 'icon-dashboard',
 },
 children: [
   {
     path: 'workplace',
     name: 'workplace',
     component: () => import('@/views/dashboard/workplace/index.vue'),
     meta: {
       locale: 'menu.dashboard.workplace',
       requiresAuth: true,
       roles: ['admin'],
       hideInMenu: false,
     },
   },
 ],
};

路由 Meta 元信息

参数名	说明	类型	默认值
roles	配置能访问该页面的角色，如果不匹配，则会被禁止访问该路由页面	string[]	-
requiresAuth	是否需要登录鉴权	boolean	false
icon	菜单配置icon	string	-
locale	一级菜单名（语言包键名）	string	-
hideInMenu	是否在左侧菜单中隐藏该项	boolean	-
hideChildrenInMenu	强制在左侧菜单中显示单项	boolean	-
activeMenu	高亮设置的菜单项	string	-
order	排序路由菜单项。如果设置该值，值越高，越靠前	number	-
noAffix	如果设置为true，标签将不会添加到tab-bar中	boolean	-
ignoreCache	如果设置为true页面将不会被缓存	boolean	-