模块设置

本模块提供了一系列设置项，这些设置项可以对项目的各个功能进行调整。

系统设置

nuxt.config.ts

本模块在 nuxt.config.ts 中提供了一些设置项，以便选择性调整模块的默认行为，可用设置项如下：

🎉 编辑 nuxt.config.ts 时所有设置项均有代码提示和注释。
export default defineNuxtConfig({
  fastNav: {
    /**
     * 功能开关
     */
    features: {
      /**
       * 类型检查
       */
      check: {
        /**
         * parent 检查
         * @default false
         */
        parent: false,
      },
    },
  },
});

app.config.ts

本模块在 app.config.ts 中提供了一些设置项，以便选择性调整模块的默认行为，可用设置项如下：

🎉 编辑 app.config.ts 时所有配置项均有代码提示和注释。
export default defineAppConfig({
  fastNav: {
    /**
     * 父级菜单
     */
    menus: [],
    /**
     * 菜单配置
     */
    menu: {
      /**
       * 是否显示
       * @description 是否显示在导航中
       * @default false
       */
      show: false,
      /**
       * 默认菜单图标
       * @default "material-symbols:lists"
       */
      icon: "material-symbols:lists",
    },
    /**
     * 页面配置
     */
    page: {
      /**
       * 默认页面图标
       * @default "material-symbols:pages"
       */
      icon: "material-symbols:pages",
      /**
       * 默认菜单配置
       */
      menu: {},
      /**
       * 默认标签配置
       */
      tab: {},
    },
    head: {
      /**
       * 默认标签配置
       */
      has: true,
    },
    /**
     * 首页路由
     * @description 用于关闭所有标签时跳转
     * @default "/"
     */
    home: "/",
  },
});

全局钩子

本模块提供一些钩子，用于配置模块的默认行为，可用的钩子如下：

export default defineNuxtPlugin({
  // 必须配置此项
  enforce: "pre",
  hooks: {
    /**
     * 获取菜单列表
     * @param result 结果
     */
    "fast-nav:get-menus": (
      result: ShallowRef<Array<FastNavMenu | FastNavMenuFilled>>
    ) => {},
    /**
     * 获取菜单信息
     * @param origin 原始
     * @param result 结果
     */
    "fast-nav:get-menu": (
      origin: FastNavMenu | FastNavMenuFilled,
      result: ShallowRef<
        Omit<FastNavMenuFilled, "children" | "parent"> | undefined
      > & {
        remove(): void;
        merge(
          value: Partial<
            Omit<FastNavMenu | FastNavMenuFilled, "children" | "parent">
          >,
          order?: "before" | "after"
        ): void;
      }
    ) => {},
    /**
     * 获取页面列表
     * @param result 结果
     */
    "fast-nav:get-pages": (
      result: ShallowRef<Array<FastNavPage | FastNavPageFilled>>
    ) => {},
    /**
     * 获取页面信息
     * @param origin 原始
     * @param result 结果
     */
    "fast-nav:get-page": (
      origin: FastNavPage | FastNavPageFilled,
      result: ShallowRef<FastNavPageFilled | undefined> & {
        remove(): void;
        merge(
          value: Partial<FastNavPage | FastNavPageFilled>,
          order?: "before" | "after"
        ): void;
      }
    ) => {},
    /**
     * 获取历史记录
     * @param to 路由
     * @param result 结果
     */
    "fast-nav:get-history": (
      to: RouteLocationNormalizedGeneric,
      result: ShallowRef<FastNavHistory | undefined> & {
        remove(): void;
        merge(value: Partial<FastNavHistory>, order?: "before" | "after"): void;
      }
    ) => {},
  },
});

页面设置

definePageMeta

管理模板扩展了 nuxt 的 definePageMeta 参数，对于一些针对页面进行微调的需求可尝试在这里进行修改。

🎉 编辑 definePageMeta 时所有配置项均有代码提示和注释。
<template>测试页面</template>

<script lang="tsx" setup>
definePageMeta({
  /**
   * 图标
   * @default 模块配置
   */
  icon: "logos:testcafe",
  /**
   * 标题
   * @default 路由名称
   */
  title: "测试页面",
  /**
   * 描述
   * @default ''
   */
  desc: "测试页面描述",
  /***
   * 布局
   */
  layout: "default",
  /**
   * 标题配置
   */
  head: {
    /**
     * 标签有无
     * @description 是否显示标签
     * @default true
     */
    has: true,
  },
  /**
   * 菜单配置
   */
  menu: {
    /**
     * 导航有无
     * @description 是否显示导航
     * @default true
     */
    has: true,
    /**
     * 导航排序
     * @default 0
     */
    order: 1,
    /**
     * 描述
     * @default ''
     */
    desc: "测试页面描述(覆盖)",
    /**
     * 是否禁用
     * @default false
     */
    disabled: false,
    /**
     * 图标
     * @default 模块配置
     */
    icon: "logos:testcafe",
    /**
     * 父级菜单
     * @default 文件所在目录
     * @description $root 为根级菜单
     */
    parent: "test",
    /**
     * 是否显示
     * @description 是否显示在导航中
     * @default true
     */
    show: true,
    /**
     * 标题
     * @default 路由名称
     */
    title: "测试页面(覆盖)",
  },
  /**
   * 标签配置
   */
  tab: {
    /**
     * 描述
     * @default ''
     */
    desc: "测试页面描述(覆盖)",
    /**
     * 标签有无
     * @description 是否显示标签
     * @default true
     */
    has: true,
    /**
     * 图标
     * @default 模块配置
     */
    icon: "logos:testcafe",
    /**
     * 是否显示
     * @description 是否显示在标签中
     * @default true
     */
    show: true,
    /**
     * 标题
     * @default 路由名称
     */
    title: "测试页面(覆盖)",
  },
});
</script>
Edit this page on GitHub
Table of Contents