路由定义

Halo 为插件提供了为 Console 控制台和 UC 个人中心添加新路由的入口，可以用于为插件单独提供一个页面。

此文档将介绍如何定义路由以及侧边菜单项。

定义方式

Console 控制台和 UC 个人中心的路由定义基本和 Vue Router 官方的保持一致，为了区分 Console 控制台和 UC 个人中心的路由，Halo 为插件提供了两个不同的路由定义入口。

routes：Console 控制台路由定义
ucRoutes：UC 个人中心路由定义

import HomeView from "./views/HomeView.vue";
import { IconComputer } from "@halo-dev/components";

export default definePlugin({
  routes: [
    // Console 控制台路由定义
    {
      parentName: "Root",
      route: {
        path: "/foo",
        name: "Foo",
        component: HomeView,
        meta: {
          permissions: [""],
          menu: {
            name: "Foo",
            group: "content",
            icon: markRaw(IconComputer),
            priority: 40,
          },
        },
      },
    },
  ],
  ucRoutes: [
    // UC 个人中心路由定义
    {
      parentName: "Root",
      route: {
        path: "/uc-foo",
        name: "FooUC",
        component: HomeView,
        meta: {
          permissions: [""],
          menu: {
            name: "FooUC",
            group: "content",
            icon: markRaw(IconComputer),
            priority: 40,
          },
        },
      },
    },
  ],
});

类型定义

{
  routes?: RouteRecordRaw[] | RouteRecordAppend[];
  ucRoutes?: RouteRecordRaw[] | RouteRecordAppend[];
}

export interface RouteRecordAppend {
  parentName: RouteRecordName;
  route: RouteRecordRaw;
}

parentName：父路由名称，主要用于确认页面 Layout，如果想要添加到顶级路由，可以设置为 Root。如果不需要设置父路由，可以完全使用 RouteRecordRaw 定义。此外，如果同时设置了 parentName 以及其下路由设置了 meta.menu，那么此路由的菜单项将成为父菜单的子菜单项，可支持的父路由名称如下：
- Console：
  - AttachmentsRoot（附件）
  - CommentsRoot（评论）
  - SinglePagesRoot（页面）
  - PostsRoot（文章）
  - MenusRoot（菜单）
  - ThemeRoot（主题）
  - OverviewRoot（概览）
  - BackupRoot（备份）
  - PluginsRoot（插件）
  - SettingsRoot（设置）
  - UsersRoot（用户）
  - ToolsRoot（工具）
- UC：
  - PostsRoot（文章）
  - NotificationsRoot（消息）

RouteRecordRaw 类型来源

RouteRecordRaw 来自 Vue Router，详见 API 文档 | Vue Router

此外，为了方便插件在 Console 控制台和 UC 个人中心添加菜单项等操作，Halo 为 RouteRecordRaw 添加了 meta 属性，该属性为 RouteMeta 类型，定义如下：

interface RouteMeta {
  title?: string; // 浏览器标题
  searchable?: boolean; // 是否可以在 Console 的全局搜索中搜索到
  permissions?: string[]; // UI 权限
  menu?: {
    // 侧边菜单配置
    name: string; // 菜单名称
    group?: CoreMenuGroupId; // 内置菜单分组 ID，如果不使用内置的分组，也可以直接填写分组名称
    icon?: Component; // 菜单图标，类型为 Vue 组件，推荐使用 https://github.com/unplugin/unplugin-icons
    priority: number; // 菜单项排序，数字越小越靠前
    mobile?: boolean; // 是否在移动端显示
  };
}

export type CoreMenuGroupId =
  "dashboard" | "content" | "interface" | "system" | "tool";

路由定义#

#定义方式

#类型定义

路由定义

定义方式

类型定义