路由菜单

⭐⭐⭐⭐⭐

后台的导航菜单是通过路由数据自动生成的，根据权限动态生成的路由存放在 /src/router/asyncRoutes 文件中, 无需权限的静态路由存放在 /src/router/index 文件中

示例代码：

export default [
  { // 一级路由
    meta: {
      title: '站点维护',
      icon: 'ComputerOutlineRounded' // SVG图标名
    },
    children: [ // 二级路由
      {
        path: '/article',
        name: 'article',
        component: Layout,
        redirect: '/article/list_article',
        meta: {
          title: '文章管理',
          icon: 'RiArticleLine'
        },
        children: [ // 三级路由
          {
            path: 'list_article',
            name: 'list_article',
            component: () => import('views/website/article/list_article.vue'),
            meta: {
              title: '文章列表',
              permission: 'list_article',
              keepAlive: ['form_article']
            }
          },
          {
            path: 'form_article',
            name: 'form_article',
            component: () => import('views/website/article/form_article.vue'),
            meta: {
              title: '文章详情',
              hidden: true, // 不在导航栏显示
              activeMenu: '/article/list_article', // 对应的导航栏高亮
              permission: 'form_article' // 所需权限
            }
          },
          {
            path: 'list_articleType',
            name: 'list_articleType',
            component: () => import('views/website/articleType/list_articleType.vue'),
            meta: {
              title: '文章类别',
              permission: 'list_articleType'
            }
          }
        ]
      }
    ]
  }
]

meta属性说明

名称	类型	默认值	说明
title	string	/	标题
hidden	boolean	false	是否在导航栏隐藏
activeMenu	string	/	对应的导航栏高亮地址(通常用于详情页)
permission	string	/	所需权限
keepAlive	array	/	指定跳转到哪些页面需要缓存该列表页（参数为页面文件名组成的数组）
icon	string	/	icons 文件夹内的SVG文件名（仅限一二级菜单）
breadcrumbNeste	array	/	静态页面需手动维护面包屑导航

breadcrumbNeste 的数据格式例如：[{ title: '个人设置', path: '/userSetting' }]

WARNING

1. 如果三级路由没有设置或只设置了一个非 hidden: true 的路由，将会以二级路由的形式展示，即不可下拉展开
2. 如果需要外链则直接设置在path属性上即可（目前只支持第三级菜单设置外链）