logo
  • Guide
  • API
  • Blog
  • English
    • 简体中文
    • English
    • @esmx/core
      Esmx
      App
      RenderContext
      ModuleConfig
      PackConfig
      ManifestJson
      @esmx/router
      Router
      Route
      Route Configuration
      RouterLink
      Navigation Guards
      Dynamic Route Matching
      Nested Routes
      Programmatic Navigation
      Scroll Behavior
      Layer Routing
      MicroApp
      Error Types
      Types Reference
      @esmx/router-vue
      RouterPlugin
      Composables
      Components
      Type Augmentation
      @esmx/router-react
      Micro-App Integration
      Hooks & Context
      Components
      SSR
      App
      @esmx/rspack
      @esmx/rspack-vue
      @esmx/rspack-react

      Last Updated: 4/7/2026, 2:16:07 AM

      Previous pageError TypesNext pageRouterPlugin

      #Types Reference

      #Introduction

      This page provides a comprehensive listing of all types exported by @esmx/router and @esmx/router-vue.

      #Core Enums

      #RouterMode

      enum RouterMode {
          history = 'history',
          memory = 'memory'
      }

      Router operation mode:

      • history: Uses browser History API
      • memory: Uses in-memory history stack

      #RouteType

      enum RouteType {
          push = 'push',
          replace = 'replace',
          restartApp = 'restartApp',
          go = 'go',
          forward = 'forward',
          back = 'back',
          unknown = 'unknown',
          pushWindow = 'pushWindow',
          replaceWindow = 'replaceWindow',
          pushLayer = 'pushLayer'
      }

      Navigation type that triggered the route creation. See Route for details.

      #Basic Data Types

      #RouteMeta

      type RouteMeta = Record<string | symbol, unknown>;

      Custom route metadata type. Used to attach arbitrary data to route configurations that is accessible via route.meta.

      const routes = [
          {
              path: '/admin',
              meta: {
                  requiresAuth: true,
                  title: 'Admin Panel',
                  [Symbol('internal')]: 'data'
              }
          }
      ];

      #RouteState

      type RouteState = Record<string, unknown>;

      Route state type. Used for persisting custom data in the browser's history state.

      router.push({
          path: '/page',
          state: { scrollY: 100, formData: { name: 'John' } }
      });

      #RouteHandleResult

      type RouteHandleResult = unknown | null | void;

      Return type of route handle hooks. The result is accessible via route.handleResult.

      #RouteMatchType

      type RouteMatchType = 'route' | 'exact' | 'include';

      Route matching strategy:

      • 'route': Route-level matching — compares whether route configurations are the same
      • 'exact': Exact matching — compares whether paths are exactly the same
      • 'include': Include matching — checks whether the current path contains the target path

      #Awaitable

      type Awaitable<T> = T | Promise<T>;

      Utility type representing a value that can be either synchronous or a Promise.

      #Route Location Types

      #RouteLocation

      interface RouteLocation {
          path?: string;
          url?: string | URL;
          params?: Record<string, string>;
          query?: Record<string, string | undefined>;
          queryArray?: Record<string, string[] | undefined>;
          hash?: string;
          state?: RouteState;
          keepScrollPosition?: boolean;
          statusCode?: number | null;
          layer?: RouteLayerOptions | null;
          confirm?: RouteConfirmHook | null;
      }

      Route location object for navigation. See Route for details.

      #RouteLocationInput

      type RouteLocationInput = RouteLocation | string;

      Input type for navigation methods. Can be a string path or a RouteLocation object.

      #Route Configuration Types

      #RouteConfig

      interface RouteConfig {
          path: string;
          component?: unknown;
          children?: RouteConfig[];
          redirect?: RouteLocationInput | RouteConfirmHook;
          meta?: RouteMeta;
          app?: string | RouterMicroAppCallback;
          asyncComponent?: () => Promise<unknown>;
          beforeEnter?: RouteConfirmHook;
          beforeUpdate?: RouteConfirmHook;
          beforeLeave?: RouteConfirmHook;
          layer?: boolean;
          override?: RouteConfirmHook;
      }

      Route configuration interface. See Route Configuration for details.

      #RouteParsedConfig

      interface RouteParsedConfig extends RouteConfig {
          compilePath: string;
          children: RouteParsedConfig[];
          match: MatchFunction;
          compile: (params?: Record<string, string>) => string;
      }

      Internal parsed route configuration with compiled matching and compilation functions.

      #RouteMatchResult

      interface RouteMatchResult {
          readonly matches: readonly RouteParsedConfig[];
          readonly params: Record<string, string | string[]>;
      }

      Result of route matching operations.

      #RouteMatcher

      type RouteMatcher = (
          to: URL,
          base: URL,
          cb?: (item: RouteParsedConfig) => boolean
      ) => RouteMatchResult;

      Route matching function type.

      #Hook Types

      #RouteConfirmHook

      type RouteConfirmHook = (
          to: Route,
          from: Route | null,
          router: Router
      ) => Awaitable<RouteConfirmHookResult>;

      Confirmation guard that can approve, cancel, or redirect navigation.

      #RouteConfirmHookResult

      type RouteConfirmHookResult =
          | void
          | false
          | RouteLocationInput
          | RouteHandleHook;

      Return type for confirmation hooks.

      #RouteNotifyHook

      type RouteNotifyHook = (
          to: Route,
          from: Route | null,
          router: Router
      ) => void;

      Notification hook called after navigation completes.

      #RouteVerifyHook

      type RouteVerifyHook = (
          to: Route,
          from: Route | null,
          router: Router
      ) => Awaitable<boolean>;

      Verification hook returning a boolean result.

      #RouteHandleHook

      type RouteHandleHook = (
          to: Route,
          from: Route | null,
          router: Router
      ) => Awaitable<RouteHandleResult>;

      Handle hook for custom route handling logic.

      #Router Core Types

      #RouterOptions

      interface RouterOptions {
          root?: string | HTMLElement;
          context?: Record<string | symbol, unknown>;
          data?: Record<string | symbol, unknown>;
          routes?: RouteConfig[];
          mode?: RouterMode;
          base?: URL;
          req?: IncomingMessage | null;
          res?: ServerResponse | null;
          apps?: RouterMicroApp;
          normalizeURL?: (to: URL, from: URL | null) => URL;
          fallback?: RouteHandleHook;
          nextTick?: () => Awaitable<void>;
          rootStyle?: Partial<CSSStyleDeclaration> | false | null;
          layer?: boolean;
          zIndex?: number;
          handleBackBoundary?: (router: Router) => void;
          handleLayerClose?: (router: Router, data?: any) => void;
      }

      Router constructor options. See Router for details.

      #RouterParsedOptions

      interface RouterParsedOptions extends Readonly<Required<RouterOptions>> {
          readonly compiledRoutes: readonly RouteParsedConfig[];
          readonly matcher: RouteMatcher;
      }

      Fully parsed and resolved router options with compiled routes and matcher.

      #RouterLink Types

      #RouterLinkType

      type RouterLinkType =
          | 'push'
          | 'replace'
          | 'pushWindow'
          | 'replaceWindow'
          | 'pushLayer';

      Navigation types for links.

      #RouterLinkProps

      interface RouterLinkProps {
          to: RouteLocationInput;
          type?: RouterLinkType;
          replace?: boolean;
          exact?: RouteMatchType;
          activeClass?: string;
          event?: string | string[];
          tag?: string;
          layerOptions?: RouteLayerOptions;
          beforeNavigate?: (event: Event, eventName: string) => void;
      }

      Link configuration properties. See RouterLink for details.

      #RouterLinkAttributes

      interface RouterLinkAttributes {
          href: string;
          class: string;
          target?: '_blank';
          rel?: string;
      }

      HTML attributes generated for link elements.

      #RouterLinkResolved

      interface RouterLinkResolved {
          route: Route;
          type: RouterLinkType;
          isActive: boolean;
          isExactActive: boolean;
          isExternal: boolean;
          tag: string;
          attributes: RouterLinkAttributes;
          navigate: (e: Event) => Promise<void>;
          createEventHandlers: (
              format?: (eventType: string) => string
          ) => Record<string, (e: Event) => Promise<void>>;
      }

      Resolved link data. See RouterLink for details.

      #Layer Types

      #RouteLayerOptions

      interface RouteLayerOptions {
          zIndex?: number;
          keepAlive?: 'exact' | 'include' | RouteVerifyHook;
          shouldClose?: RouteVerifyHook;
          autoPush?: boolean;
          push?: boolean;
          routerOptions?: RouterLayerOptions;
      }

      Layer creation options. See Layer Routing for details.

      #RouteLayerResult

      type RouteLayerResult =
          | { type: 'close'; route: Route }
          | { type: 'push'; route: Route }
          | { type: 'success'; route: Route; data?: any };

      Layer result discriminated union. See Layer Routing for details.

      #RouterLayerOptions

      type RouterLayerOptions = Omit<
          RouterOptions,
          'handleBackBoundary' | 'handleLayerClose' | 'layer'
      >;

      Router options for layer creation, excluding internally managed handler fields.

      #Micro-App Types

      #RouterMicroApp

      type RouterMicroApp =
          | Record<string, RouterMicroAppCallback | undefined>
          | RouterMicroAppCallback;

      Micro-app configuration. Can be either a named map of app factories or a single factory function.

      #RouterMicroAppCallback

      type RouterMicroAppCallback = (router: Router) => RouterMicroAppOptions;

      Factory function that creates a micro-app instance from a router.

      #RouterMicroAppOptions

      interface RouterMicroAppOptions {
          mount: (el: HTMLElement) => void;
          unmount: () => void;
          renderToString?: () => Awaitable<string>;
      }

      Micro-app lifecycle interface:

      • mount: Mount the app into a DOM element
      • unmount: Unmount and clean up the app
      • renderToString: Optional SSR render method

      #Route Options

      #RouteOptions

      interface RouteOptions {
          options?: RouterParsedOptions;
          toType?: RouteType;
          toInput?: RouteLocationInput;
          from?: URL | null;
      }

      Constructor options for the Route class (internal use).

      #Deprecated Types

      The following types are deprecated and will be removed in a future version:

      #RouterInstance

      /** @deprecated Use `Router` directly instead */
      type RouterInstance = Router;

      #RouterRawLocation

      /** @deprecated Use `RouteLocationInput` directly instead */
      type RouterRawLocation = RouteLocationInput;

      #RouterLocation

      /** @deprecated Use `RouteLocation` directly instead */
      type RouterLocation = RouteLocation;

      #RouteRecord

      /** @deprecated Use `Route` directly instead */
      type RouteRecord = Route;