FiveAdmin

菜单及路由

FiveAdmin 的菜单和路由是强绑定的，菜单是读取的路由信息来构建的。

路由相关文件在 /src/router/ 目录下

关于路由器的创建、全局路由守卫及路由白名单在 /src/router/index.js 文件中

新增菜单及路由

在 /src/router/modules/ 目录下定义的路由文件会在用户登录后自动注册，没有登录的情况下这里定义的路由是访问不到的。

是否在菜单显示是根据路由的 meta配置决定，当路由没有 meta 属性时默认不在菜单中显示。

注意

多级路由的 path 需要写全路径并且必须以 / 开头

// /src/router/modules/dashboard.js

export default {
  path: '/dashboard',
  name: 'Dashboard',
  redirect: '/dashboard/analysis',
  meta: {
    title: '仪表盘',
  },
  children: [
    {
      path: '/dashboard/analysis',
      name: 'Analysis',
      meta: {
        title: '分析页',
      },
      component: () => import('@/views/dashboard/analysis/index.vue'),
    },
    {
      path: '/dashboard/workbench',
      name: 'Workbench',
      meta: {
        title: '工作台',
      },
      component: () => import('@/views/dashboard/workbench/index.vue'),
    },
  ],
}

基础路由

基础路由信息在 /src/router/base.js 中，无需登录也可以访问路由需要放在这里并加入路由白名单。

//  /src/router/base.js

export default [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue'),
  },
  {
    path: '/:path(.*)*',
    name: 'NotFound',
    component: () => import('@/views/error-page/404.vue'),
  },
]

路由白名单

路由路径设置为白名单后，在用户不登陆的情况下也可以访问

这里新增一个白名单路由地址作为示例，如：将 /home 路径添加到白名单

  1. 新增一个路由信息
//  /src/router/base.js

export default [
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/home/index.vue'),
  },
  // ....
]
  1. 将路由信息添加到白名单
// /src/router/index.js

export const WHITE_LIST = ['/home']

注意

白名单路由必须定义在 /src/router/base.js 中，并且白名单的路由页面只能被显示在 layout 外。

meta配置

当路由信息中没有 meta 属性时，此路由默认不显示在菜单中。

{
  // 在菜单中显示的标题。可以是中文或多语言文本模板。
    title:String, 
    // 在菜单中显示的图标。使用的自定义的 SvgIcon 组件渲染，可以是本地图标或网络中的资源。
    icon:String, 
    // 是否在菜单中隐藏。（选填，默认为 false）
    isHide: Boolean, 
    // 是否在菜单中隐藏所有子级。（选填，默认为 false）。注意，只有当 isHide 为 true 时生效
    hideChildren: Boolean, 
    // 如果有值并以 http: 或 https: 开头，则以外链内嵌方式打开
    iframeLink:String, 
    // 在 layout 框架外打开。（选填，默认为 false）。如登录页面，数据大屏等。
    isOuter:Boolean, 
    // 可以访问的角色编码。（选填，默认为空值）
    // 为 [] 时所有角色都不可以访问，为空值时所有角色都可以访问
    // 当没有权限访问时 hideChildren 永远为 true。
    roles:Array|String, 
    // 是否缓存组件实例。（选填，默认为 false）。
    // 注意：组件名要与对应路由的 name 相同
    isKeep:Boolean, 
    // 多标签页模式下是否固定在标签页。（选填，默认 false）
    fixedTab: Boolean,
    // 页面切换动画。（选填）
    transition:String, 
    // 排序号，仅对一级菜单有效（仅后端路由模式无效）
    sortNo:Number,
}

外链

只需要将路由的 path 以 http: 或 https: 开头即可，不需要以 / 开头。

{
  path: 'https://www.baidu.com',
  name: 'Baidu',
  meta: {
    title: '百度',
  },
},

外链内嵌

需要将 meta.iframeLink 设置为需要嵌套的链接地址

如果路由来源设置的是前端，还需要将 component 设置为 () => import('@/layout/main/LayoutIframe.vue')

如果路由来源设置的是后端，或前后端混合，则不需要配置 component，程序在加载路由时会自动将 component 设置为 LayoutIframe

{
  path: '/test',
  name: 'Test',
  meta: {
    title: '测试外链内嵌',
    iframeLink: 'https://localhost:8888',
  },
  component: () => import('@/layout/main/LayoutIframe.vue'),
}

Layout外部页面

如数据大屏需要在 Layout 布局外显示的页面，需要将 meta.isOuter 设置为 true

{
  path: '/screen',
  name: 'BigScreen',
  meta: {
    title: '数据大屏展示',
    isOuter: true,
  },
  component: () => import('@/views/demo/data-big-screen/BigScreen1.vue'),
},

默认首页

首页是当用户登录成功之后默认跳转的页面，或者在地址栏输入 / 直接访问的页面。

默认首页是可配置的，可以全局配置或用户单独配置，用户配置优先。

在 .env 文件中全局配置

// .env

VITE_APP_HOME_PATH = /home

为用户单独配置只需要设置用户信息的 homePath 属性值即可

Last Updated:
Contributors: zhangyuge