nMenuPlugin - 菜单组件

什么是 nMenuPlugin？

nMenuPlugin 是一个用于菜单管理的插件。它最终会输出 n-menu 所需要的属性供 n-menu 组件消费，它和权限无关，菜单的生成取决于用户传递的配置。

INFO

它被设计成一个插件是因为可以在路由配置中定义一些菜单配置

启用插件

import { createRouter, nMenuPlugin } from '@pro/router'

const router = createRouter({
  // ... 其他配置
  plugins: [
    nMenuPlugin({
      service: () => {
        return {
          routes: data // 内部会将 data 数据处理成 n-menu 组件需要的数据，这里 data 根据实际场景来控制，在 Admin 中这里使用的是权限过滤后的路由数据
        }
      }
    })
  ]
})

在组件中

<template>
  <n-menu :options="$router.buildMenus()"/>
</template>

在路由中配置

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: {
      title: '菜单标题',
      icon: '菜单图标',
      hideInMenu: true, // 不在菜单中显示
      order: 1, // 菜单排序，越小越靠前
    }
  },
]

插件配置选项

选项	类型	默认值	说明
service	Service	-	必填，菜单配置选项，详细类型见下方

import type { Merge } from 'type-fest'
import type { MenuOption } from 'naive-ui'
import type { RouteRecordRaw } from 'vue-router'

type ServiceRoute = Merge<
  RouteRecordRaw,
  { component?: any, children?: any[] }
>

type Service = () => {
  /**
   * 根据此配置生成菜单数据
   */
  routes: ServiceRoute[]
  /**
   * 二次处理菜单项，比如支持国际化
   * @param item 处理后的菜单项
   * @param rawItem 原始菜单项
   */
  resolveMenuItem?: (item: MenuOption, rawItem: ServiceRoute) => MenuOption
}

路由 Meta 配置选项

选项	类型	默认值	说明
title	string	-	选填，菜单标题
icon	string	'ant-design:menu-outlined'	选填，菜单图标，可填写 iconify 网站支持的图标，也可以填写图片地址
hideInMenu	boolean	false	选填，是否不在菜单中显示
order	number	-	选填，菜单排序，越小越靠前