{"id":21822170,"url":"https://github.com/soybeanjs/elegant-router","last_synced_at":"2026-05-31T11:00:49.707Z","repository":{"id":179916341,"uuid":"661333945","full_name":"soybeanjs/elegant-router","owner":"soybeanjs","description":"A plugin to create router elegantly for Vue","archived":false,"fork":false,"pushed_at":"2026-02-08T08:50:30.000Z","size":1910,"stargazers_count":136,"open_issues_count":0,"forks_count":18,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-02-27T00:01:47.239Z","etag":null,"topics":["automatic","file-based-routing","vite","vue-router"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/soybeanjs.png","metadata":{"files":{"readme":"README.en_US.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-07-02T14:19:03.000Z","updated_at":"2026-02-26T12:20:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"735511f6-dffb-49ac-a4f5-f288829e0971","html_url":"https://github.com/soybeanjs/elegant-router","commit_stats":null,"previous_names":["soybeanjs/elegant-router"],"tags_count":68,"template":false,"template_full_name":null,"purl":"pkg:github/soybeanjs/elegant-router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soybeanjs%2Felegant-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soybeanjs%2Felegant-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soybeanjs%2Felegant-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soybeanjs%2Felegant-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soybeanjs","download_url":"https://codeload.github.com/soybeanjs/elegant-router/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soybeanjs%2Felegant-router/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33728391,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-31T02:00:06.040Z","response_time":95,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["automatic","file-based-routing","vite","vue-router"],"created_at":"2024-11-27T17:13:28.922Z","updated_at":"2026-05-31T11:00:49.676Z","avatar_url":"https://github.com/soybeanjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ElegantRouter\n\n[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/soybeanjs/elegant-router)\n\nEnglish | [中文](./README.md)\n\nA file-system based automatic routing tool for Vue.js, simplifying route configuration and improving development efficiency.\n\n\u003e [!WARNING]\n\u003e **Note**: The code and documentation for the old version have been migrated to the [legacy branch](https://github.com/SoybeanJS/elegant-router/tree/legacy). The old version's package name was `@elegant-router/vue`, while the new version's package name is `elegant-router`. If you are using the old version or need to reference its documentation, please visit that branch.\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Installation](#installation)\n- [Command Line Interface](#command-line-interface)\n- [Build Tool Support](#build-tool-support)\n- [Quick Start](#quick-start)\n- [Route Creation Conventions](#route-creation-conventions)\n- [How It Works](#how-it-works)\n- [Configuration Options](#configuration-options)\n- [Version Comparison](#version-comparison)\n- [Best Practices](#best-practices)\n\n## Introduction\n\nElegantRouter is an innovative routing management tool designed for Vue.js applications, specifically created to simplify Vue Router configuration. It automatically generates routes based on file system structure, eliminating the tedious process of manual route configuration and allowing developers to focus on implementing application features.\n\nWith ElegantRouter, you only need to create Vue page files following conventional naming rules, and the system will automatically:\n\n- Parse file paths to generate route paths\n- Create intuitive route names\n- Handle nested routes and route parameters\n- Manage relationships between layouts and pages\n- Generate complete type definitions\n\nThis convention-based route generation approach not only improves development efficiency but also enhances project maintainability and scalability. There's no need to manually define each route in separate configuration files; the route structure automatically updates with changes to the file system, ensuring route configurations stay synchronized with the actual page structure.\n\n### Background\n\nTraditional Vue Router configuration typically requires developers to manually complete multiple steps: importing layout components, importing page components, defining route configurations, etc. While these steps are simple, they become tedious and error-prone in large projects. Especially when maintaining a large number of routes, maintaining consistency in route names and paths becomes challenging, often leading to messy and difficult-to-manage route definitions.\n\nElegantRouter aims to solve these problems by simplifying the route configuration process for Vue applications through file system conventions. Compared to similar tools, ElegantRouter's unique advantages include:\n\n1. **Simplified Configuration** - Other tools often have numerous configuration rules and treat route data as a black box that's difficult to customize; ElegantRouter adopts a white-box design, making route data transparent and easy to extend.\n\n2. **API-First** - Following the API-first principle, it completely automates the route configuration process, reducing manual intervention.\n\nWith ElegantRouter, you only need to create files according to conventions, and the system will automatically recognize and generate corresponding route configurations, greatly improving Vue application development efficiency and reducing maintenance costs.\n\n### Features\n\nElegantRouter provides a series of powerful features that make route management simple and efficient:\n\n- **File System Driven** - No manual configuration needed; route structure is derived directly from the file system, reducing maintenance work\n- **Transparent Data Structure** - Route data is completely transparent, making it easy to debug and customize\n- **Type-Safe Navigation** - Automatically generates type definition files, providing complete type inference and smart hints\n- **Flexible Configuration** - Offers rich configuration options to meet various complex scenario requirements\n- **Intelligent Layout Management** - Automatically handles relationships between layouts and page components, simplifying nested route creation\n- **Performance Optimization** - Built-in support for code splitting and lazy loading to optimize application performance\n\n### Core Functions\n\nElegantRouter's core functionality is designed around simplifying development processes and improving efficiency:\n\n1. **Automatic Route Generation** - Automatically generates complete route configurations from the file system, including paths, names, and nested relationships\n2. **Type Definition Generation** - Creates type declaration files to ensure type-safe route operations\n3. **Component Import Optimization** - Handles dynamic component imports and code splitting to enhance application performance\n4. **Layout System Integration** - Simplifies the association between layouts and page components, automatically handling nested routes\n5. **Route Transformation** - Converts a concise single-level route structure into the nested route structure required by the framework\n\n## Installation\n\nInstall ElegantRouter using a package manager:\n\n```bash\npnpm install elegant-router\n```\n\n## Command Line Interface\n\nElegantRouter provides a command-line tool to help you quickly create, delete, and manage routes.\n\n### Global Installation\n\n```bash\n# Install globally\nnpm install -g elegant-router\n\n# Use command\ner --help\n```\n\n### Local Installation\n\nIf you've already installed ElegantRouter in your project, you can use the CLI tool via npx:\n\n```bash\nnpx er --help\n```\n\n### Available Commands\n\nElegantRouter CLI provides the following commands:\n\n| Command        | Shorthand | Description                        |\n| -------------- | --------- | ---------------------------------- |\n| `er generate`  | `er -g`   | Generate route configuration files |\n| `er add`       | `er -a`   | Add a new route file               |\n| `er reuse`     | `er -p`   | Add a reused route file            |\n| `er delete`    | `er -d`   | Delete an existing route file      |\n| `er recovery`  | `er -r`   | Recover a deleted route file       |\n| `er update`    | `er -u`   | Update route configuration         |\n| `er backup`    | `er -b`   | Manage route backups               |\n| `er --help`    | `er -h`   | Show help information              |\n| `er --version` | `er -v`   | Show version information           |\n\n### Command Details\n\n#### `er generate` Command\n\nGenerates route configuration files based on the current file system structure. This command will:\n\n- Scan configured page directories\n- Parse file paths to generate route configurations\n- Update files in the route generation directory\n\n```bash\n# Basic usage\ner generate\n```\n\n#### `er add` Command\n\nInteractively adds new route files. This command will guide you through the following steps:\n\n1. Enter the route file path or name\n2. Select the layout to use\n3. Choose the page directory (if multiple are configured)\n\nSupported file types:\n\n- Vue Single File Components (.vue)\n- TSX Components (.tsx)\n- JSX Components (.jsx)\n\n```bash\n# Basic usage\ner add\n```\n\n#### `er reuse` Command\n\nInteractively add a reused route file. This command will guide you through:\n\n1. Entering the reused route path or name\n2. Selecting the layout to use\n3. Selecting the page directory (if multiple are configured)\n\nSupported file types:\n\n- Vue Single File Component (.vue)\n- TSX Component (.tsx)\n- JSX Component (.jsx)\n\n```bash\n# Basic usage\ner reuse\n```\n\n#### `er delete` Command\n\nInteractively removes existing route files. This command will:\n\n1. Display a list of all current routes\n2. Let you select the route to delete\n3. Delete the corresponding file\n4. Update route configuration\n\nDeleted routes are automatically backed up and can be recovered using the `recovery` command.\n\n```bash\n# Basic usage\ner delete\n```\n\n#### `er recovery` Command\n\nRecovers previously deleted route files. This command will:\n\n1. Display a list of all recoverable routes\n2. Let you select the route to recover\n3. Restore the route file and configuration\n4. Update route configuration\n\n```bash\n# Basic usage\ner recovery\n```\n\n#### `er update` Command\n\nUpdates route configuration. This command will:\n\n- Rescan the file system\n- Update route configuration\n- Maintain existing route structure\n\n```bash\n# Basic usage\ner update\n```\n\n#### `er backup` Command\n\nManage route backups. This command provides the following features:\n\n1. List all route backups\n2. View the content of backed-up route files\n3. Delete unnecessary backups\n\nWhen you delete a route, the system automatically creates a backup. You can use this command to manage these backups.\n\n```bash\n# Basic usage\ner backup\n```\n\nWhen using this command, you will see the following options:\n\n- **List Route Backups** - Display a list of all backed-up routes and view the detailed content of each backup\n- **Delete Route Backup** - Remove a specified route backup from the backup list\n\n### Configuration File\n\nYou can create an `{er|elegant-router}.config.{js,ts,mjs,mts}` file in your project root to configure the CLI tool's behavior.\n\n```ts\n// er.config.ts\nimport { defineConfig } from 'elegant-router';\n\nexport default defineConfig({\n  // Page directory\n  pageDir: 'src/views',\n  // Layout configuration\n  layouts: {\n    base: 'src/layouts/base/index.vue',\n    blank: 'src/layouts/blank/index.vue'\n  },\n  // Reuse route configuration\n  reuseRoutes: ['/reuse1', '/reuse2/:id', '/reuse3/:id?', '/reuse4/:id?/:name?'],\n  // Default reuse route component\n  defaultReuseRouteComponent: 'wip',\n  // Root route redirect\n  rootRedirect: '/dashboard',\n  // 404 route component\n  notFoundRouteComponent: 'NotFound'\n});\n```\n\n### Usage Examples\n\n#### Generate Routes\n\n```bash\n# Generate route configurations based on current file structure\ner generate\n```\n\n#### Add New Route\n\n```bash\n# Interactively add a new route\ner add\n```\n\nThis will start an interactive command-line interface that guides you through:\n\n1. Entering the route file path or name\n2. Choosing a route layout\n3. Selecting the page directory (if multiple are configured)\n\nThe CLI tool will automatically create the file and update the route configuration.\n\n#### Delete Route\n\n```bash\n# Interactively remove a route\ner delete\n```\n\nThis will display a list of all current routes and let you select which one to remove. After confirmation, the CLI tool will delete the corresponding file and update the route configuration.\n\n#### Recover Route\n\n```bash\n# Recover a deleted route\ner recovery\n```\n\nThis will display a list of all recoverable routes and let you select which one to recover. After confirmation, the CLI tool will restore the corresponding file and configuration.\n\n## Build Tool Support\n\nElegantRouter supports various mainstream build tools to accommodate different project environment requirements. Regardless of which build tool you use, ElegantRouter provides a consistent automatic route generation experience.\n\n### Vite\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport ElegantRouter from 'elegant-router/vite';\n\nexport default defineConfig({\n  plugins: [vue(), ElegantRouter()]\n});\n```\n\n### Webpack\n\n```ts\n// webpack.config.js\nconst ElegantRouter = require('elegant-router/webpack');\n\nmodule.exports = {\n  // Other configurations...\n  plugins: [new ElegantRouter()]\n};\n```\n\n### Rollup\n\n```ts\n// rollup.config.js\nimport ElegantRouter from 'elegant-router/rollup';\n\nexport default {\n  // Other configurations...\n  plugins: [ElegantRouter()]\n};\n```\n\n### ESBuild\n\n```ts\n// esbuild.config.js\nconst { build } = require('esbuild');\nconst ElegantRouter = require('elegant-router/esbuild');\n\nbuild({\n  // Other configurations...\n  plugins: [ElegantRouter()]\n});\n```\n\n### UnPlugins Universal Interface\n\nElegantRouter also provides a UnPlugins universal interface that can be used in build tools that support UnPlugins:\n\n```ts\nimport { createUnplugin } from 'elegant-router/unplugin';\n\nconst ElegantRouterUnplugin = createUnplugin({\n  // Configuration options\n});\n\n// Then use the appropriate method according to different build tools\n// ElegantRouterUnplugin.vite()\n// ElegantRouterUnplugin.webpack()\n// ElegantRouterUnplugin.rollup()\n// etc...\n```\n\n## Quick Start\n\n### Configuring in a Vite Project\n\nAdd the ElegantRouter plugin to your Vite configuration:\n\n```ts\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport ElegantRouter from 'elegant-router/vite';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    ElegantRouter() // Use default configuration\n  ]\n});\n```\n\n### Integrating with Vue Router\n\nImport the generated route data in your router file:\n\n```ts\n// src/router/index.ts\nimport { createRouter, createWebHistory } from 'vue-router';\nimport { routes } from './_generated/routes';\nimport { layouts, views } from './_generated/imports';\nimport { transformToVueRoutes } from './_generated/transformer';\n\n// Transform routes\nconst vueRoutes = transformToVueRoutes(routes, layouts, views);\n\nconst router = createRouter({\n  history: createWebHistory(),\n  routes: vueRoutes\n});\n\nexport default router;\n```\n\n## Route Creation Conventions\n\nElegantRouter creates routes based on file system conventions, following simple and intuitive rules. The new version is designed to be more flexible, not enforcing directory structure but providing clear file naming conventions.\n\n### Basic Routes\n\nCreate a regular page component to automatically generate the corresponding route:\n\n**File Path:** `src/views/home/index.vue`\n\n**Generated Route:**\n\n```ts\n{\n  name: 'Home',\n  path: '/home',\n  layout: 'base',\n  component: 'Home'\n}\n```\n\n\u003e The `layout` property specifies the layout component used by the page, and the `component` property identifies the view component. The transformer builds the final nested route structure based on this information.\n\n\u003e You can add other properties to the generated route object, such as `meta`, `props`, `beforeEnter`, etc., to meet specific needs.\n\n### Parameter Routes\n\nUse bracket syntax to create routes with parameters:\n\n**File Path:** `src/views/list/[id].vue`\n\n**Generated Route:**\n\n```ts\n{\n  name: 'ListId',\n  path: '/list/:id',\n  layout: 'base',\n  component: 'ListId'\n}\n```\n\n### Optional Parameter Routes\n\nUse double bracket syntax to create routes with optional parameters:\n\n**File Path:** `src/views/list/detail-[[id]]-[[userId]].vue`\n\n**Generated Route:**\n\n```ts\n{\n  name: 'ListDetailIdUserId',\n  path: '/list/detail-:id?-:userId?',\n  layout: 'base',\n  component: 'ListDetailIdUserId'\n}\n```\n\n### Multiple Parameter Routes\n\nUse underscores to separate multiple parameters:\n\n**File Path:** `src/views/list/detail_[id]_[userId].vue`\n\n**Generated Route:**\n\n```ts\n{\n  name: 'ListDetailIdUserId',\n  path: '/list/detail/:id/:userId',\n  layout: 'base',\n  component: 'ListDetailIdUserId'\n}\n```\n\n### Group Routes\n\nUse parentheses to create groups that don't affect the route path:\n\n**File Path:** `src/views/(group)/demo/index.vue`\n\n**Generated Route:**\n\n```ts\n{\n  name: 'Demo',\n  path: '/demo',\n  component: 'Demo'\n}\n```\n\n### Reuse Routes\n\nIf you need to reuse existing page route files, you can configure the `reuseRoutes` option:\n\n```ts\nreuseRoutes: ['/reuse1', '/reuse2/:id', '/reuse3/:id?/:name?'];\n```\n\nReused routes use the component specified in the `defaultReuseRouteComponent` configuration (default is 'Wip').\n\n## How It Works\n\n### File Watching Mechanism\n\nWhen starting the project, the plugin initializes a file watcher that monitors page file changes in real-time. When file additions, deletions, or renames are detected, the plugin automatically regenerates the route-related content without requiring manual intervention or service restarts. This ensures that route configurations always stay synchronized with the actual file structure, greatly enhancing the development experience.\n\nThe watcher's main features include:\n\n- **Real-time Response** - Updates route configurations immediately after file changes\n- **Intelligent Recognition** - Only processes file changes that conform to routing conventions\n- **Incremental Updates** - Only regenerates affected route content, improving performance\n- **Debounce Processing** - Batch file changes are processed together within a short time frame, avoiding frequent updates\n\nThe `watchFile` configuration option controls whether the file watching functionality is enabled, and the `fileUpdateDuration` option sets the debounce delay time.\n\n### Component Name Injection\n\nThe plugin automatically injects route names into route file components, which is crucial for Vue Router's KeepAlive functionality. KeepAlive relies on component names to correctly cache and restore component states.\n\nSupported component types:\n\n- Vue Single File Components (.vue)\n- TSX Components (.tsx)\n- JSX Components (.jsx)\n\nInjection rules:\n\n1. If a component already has a name property, it remains unchanged\n2. If a component doesn't have a name property, the route name is automatically injected\n3. Route names are automatically generated based on file paths, following PascalCase naming conventions\n\nFor example, for the file `src/views/home/index.vue`, it will automatically inject:\n\n```vue\n\u003cscript setup\u003e\nconst _sfc_main = {\n  name: 'Home' // Automatically injected component name\n  // ... other component options\n};\n\u003c/script\u003e\n```\n\nFor TSX/JSX components:\n\n```tsx\nexport default defineComponent({\n  name: 'Home', // Automatically injected component name\n  setup() {\n    return () =\u003e \u003cdiv\u003eHome\u003c/div\u003e;\n  }\n});\n```\n\n### Generated File Structure\n\nAfter starting the project, ElegantRouter generates the following files in the configured directory (default: `src/router/_generated`):\n\n1. **routes.ts** - Stores complete route configurations generated from the file system\n2. **imports.ts** - Contains automatic import statements for all layout and view components\n3. **transformer.ts** - Provides route transformation functions to convert single-level routes to nested structures\n4. **shared.ts** - Provides type-safe route utility functions for referencing routes in code\n\n### Route Transformation Process\n\nElegantRouter uses a single-level to nested route transformation process to simplify route management:\n\n```ts\n// Generated single-level route (simple and intuitive)\n{\n  name: 'Home',\n  path: '/home',\n  layout: 'base',\n  component: 'Home'\n}\n\n// Transformed nested route (grouped by layout)\n{\n  path: '/base-layout',\n  component: () =\u003e import('@/layouts/base/index.vue'),\n  children: [\n    {\n      name: 'Home',\n      path: '/home',\n      component: () =\u003e import('@/views/home/index.vue')\n    }\n    // ...other routes with the same layout\n  ]\n}\n```\n\n## Configuration Options\n\nElegantRouter provides rich configuration options that allow you to customize the route generation behavior according to your project requirements:\n\n```ts\ninterface AutoRouterOptions {\n  /**\n   * The root directory of the project\n   *\n   * @default process.cwd()\n   */\n  cwd?: string;\n  /**\n   * Whether to watch the file\n   *\n   * @default true\n   */\n  watchFile?: boolean;\n  /**\n   * The duration of the file update\n   *\n   * @default 500 ms\n   */\n  fileUpdateDuration?: number;\n  /**\n   * The directory of the pages\n   *\n   * @default \"['src/views']\"\n   */\n  pageDir?: MaybeArray\u003cstring\u003e;\n  /**\n   * The glob of the pages\n   *\n   * @default '**/*.vue'\n   */\n  pageInclude?: MaybeArray\u003cstring\u003e;\n  /**\n   * The glob of the pages to exclude\n   *\n   * @default ['**/components/**', '**/modules/**']\n   */\n  pageExclude?: MaybeArray\u003cstring\u003e;\n  /**\n   * The path of the dts file\n   *\n   * @default 'src/typings/elegant-router.d.ts'\n   */\n  dts?: string;\n  /**\n   * The path of the vue-router dts file\n   *\n   * @default 'src/typings/typed-router.d.ts'\n   */\n  vueRouterDts?: string;\n  /**\n   * The path of the tsconfig file\n   *\n   * @default 'tsconfig.json'\n   */\n  tsconfig?: string;\n  /**\n   * The alias of the project\n   *\n   * @default 'get the alias from the tsconfig'\n   */\n  alias?: Record\u003cstring, string\u003e;\n  /**\n   * The directory of the router generated\n   *\n   * @default 'src/router/_generated'\n   */\n  routerGeneratedDir?: string;\n  /**\n   * The layouts of the router\n   *\n   * @default \"{\n   *  base: 'src/layouts/base/index.vue',\n   *  blank: 'src/layouts/blank/index.vue',\n   * }\"\n   */\n  layouts?: Record\u003cstring, string\u003e;\n  /**\n   * The lazy of the layout\n   *\n   * @default true\n   */\n  layoutLazy?: (layout: string) =\u003e boolean;\n  /**\n   * Reuse existing route files\n   *\n   * @example\n   *   ['/reuse1', '/reuse2/:id', '/reuse3/:id?/:name?'];\n   */\n  reuseRoutes?: string[];\n  /**\n   * The default component for reused routes\n   *\n   * @default 'Wip'\n   */\n  defaultReuseRouteComponent?: string;\n  /**\n   * The root redirect path\n   *\n   * @default '/home'\n   */\n  rootRedirect?: string;\n  /**\n   * The not found route component\n   *\n   * @default '404'\n   */\n  notFoundRouteComponent?: string;\n  /**\n   * The path of the route\n   *\n   * @default 'src/router/auto-router'\n   */\n  getRoutePath?: (node: AutoRouterNode) =\u003e string;\n  /**\n   * The name of the route\n   *\n   * @default transform the path to the route name\n   */\n  getRouteName?: (node: AutoRouterNode) =\u003e string;\n  /**\n   * The layout of the route\n   *\n   * @default get the first key of the layouts\n   */\n  getRouteLayout?: (node: AutoRouterNode) =\u003e string;\n  /**\n   * The lazy of the route\n   *\n   * @default true\n   */\n  routeLazy?: (node: AutoRouterNode) =\u003e boolean;\n}\n```\n\n### Built-in Routes\n\nElegantRouter now provides built-in support for basic routes, including:\n\n1. **Root Route** - Automatically creates a root route node with path '/'\n2. **NotFound Route** - Automatically creates a wildcard route node with path '/:pathMatch(._)_' to catch all unmatched paths\n\nThese built-in routes can be used without additional configuration, as the system automatically adds them to the route list. You can customize their behavior through configuration options:\n\n- `rootRedirect` - Set the redirect target for the root route\n- `notFoundRouteComponent` - Specify the component used by the 404 route\n\n## Version Comparison\n\nCompared to the old version `@elegant-router/vue`, the new version `elegant-router` has made many improvements:\n\n### System Design Improvements\n\n| Feature         | Old Version                                                   | New Version                                                              |\n| --------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------ |\n| Architecture    | Black-box design, route data processing logic not transparent | White-box design, route data completely transparent and accessible       |\n| Processing Flow | Complex process, difficult to extend                          | Clear processing steps, easy to customize and extend                     |\n| File Parsing    | Limited file parsing capabilities                             | More powerful file system parsing, supporting various naming conventions |\n| Type Safety     | Basic type support                                            | Complete type definitions and automatically generated type declarations  |\n| Reuse Routes    | Limited capabilities                                          | Comprehensive support for reuse routes                                   |\n| Built-in Routes | Basic routes need manual configuration                        | Built-in root and 404 routes, simplifying configuration                  |\n\n## Best Practices\n\nTo fully leverage the power of ElegantRouter, we recommend the following best practices:\n\n### Use Built-in Routes to Simplify Configuration\n\nLeverage ElegantRouter's built-in root and 404 routes to simplify your configuration:\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport ElegantRouter from 'elegant-router/vite';\n\nexport default defineConfig({\n  plugins: [vue(), ElegantRouter()]\n});\n```\n\n### Combine Automatic Routes and Reuse Routes\n\nMix file-system-based automatic routes with reuse routes to flexibly address various scenarios:\n\n```ts\n{\n  reuseRoutes: ['/reuse1', '/reuse2/:id', '/reuse3/:id?/:name?'],\n  defaultReuseRouteComponent: 'Wip'\n}\n```\n\n### File Organization\n\n- Maintain a reasonable naming convention and directory structure. Although there are no strict restrictions, good organization improves maintainability.\n- Organize files by business module or feature module to make route paths more meaningful.\n- For better readability, it is recommended to use `index.vue` or meaningful file names for page components.\n\n### Route Parameter Handling\n\n- Choose parameter types appropriately: use `[param]` for required parameters and `[[param]]` for optional parameters.\n- Parameter names should be descriptive and avoid being too simple or ambiguous.\n- For complex parameter combinations, use multi-parameter syntax like `detail_[id]_[userId]` to improve readability.\n\n### Layout Management\n\n- Create a clear layout hierarchy and avoid overly complex nesting.\n- Configure the `layouts` option reasonably to ensure each page has an appropriate layout.\n- Use the `layout` property to control the layout of the page; pages with the same layout will be automatically grouped.\n\n### Performance Optimization\n\n- Configure component lazy loading as needed, especially for large page components.\n- For large applications, split routes by feature module to improve initial load speed.\n- Use the `dynamicImport` configuration appropriately to control how components are imported.\n\n### Utility Functions\n\n- Make full use of the utility functions provided in `shared.ts` for type-safe route navigation.\n- Use the automatically generated types to enhance development experience and code quality.\n- Combine with IDE type hints to reduce errors in route operations.\n\nBy following these best practices, you can fully utilize ElegantRouter's powerful features to create efficient and maintainable routing systems.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoybeanjs%2Felegant-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoybeanjs%2Felegant-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoybeanjs%2Felegant-router/lists"}