Component Register

In the TechUI Workbench (Admin) system, the Component Register is the key bridge connecting "backend menu data" and "frontend Vue component files".

Due to the strict static analysis limitations of build tools like Vite and Webpack on dynamic import() statements (which typically do not support fully dynamic variable paths), we need to maintain a registry on the frontend to explicitly declare the correspondence between "route identifiers" and "file paths".

Core Mechanism

The component registry is essentially a key-value pair object:

• Key: The unique identifier string for the route (e.g., dashboard). The label field in the menu data returned by the backend must match this Key exactly.
• Value: A function that returns a Promise, pointing to the specific .vue file path.

Configuration Guide

Create Component

First, develop standard Vue components in your src/views or src/pages directory.

Write Registry (register.js)

Maintain the registry file in an appropriate location in your project (e.g., src/navigation/register.js).

import { markRaw } from "vue";

// Define component mapping relationship
const register = {
  // Key name: Must match the label field of the backend menu
  // Value: Dynamic import function for the component
  
  // Example: Dashboard
  dashboard: () => import("@/views/dashboard/index.vue"),
  
  // Example: User Management
  userList: () => import("@/views/system/user/list.vue"),
  
  // Example: System Settings
  setting: () => import("@/views/system/setting.vue"),
}

// Performance Optimization: Use markRaw
// Prevent these component loading functions from being proxied by Vue's reactivity system
// to reduce unnecessary performance overhead.
Object.keys(register).forEach(key => {
  register[key] = markRaw(register[key]);
});

export default register;

Global Injection

In the application entry file (such as App.vue or main.js), inject this registry into TechUI's global Admin state. This step must be completed before route initialization.

// App.vue or main.js
import componentRegister from "./navigation/register"; // Import the file above
import { inject } from "vue";

// Get global service
const { $ADMIN } = inject('$global');

// Inject registry
$ADMIN.value.componentRegister = componentRegister;

Workflow

Once the configuration is complete, when the dynamic routing system starts, it works according to the following process:

1. Fetch Data: The frontend retrieves the menu list from the backend API, for example:

{ "label": "dashboard", "title": "Dashboard", ... }

2. Lookup Component: The dynamic routing logic reads the label ("dashboard") from the menu and looks up the corresponding Key in $ADMIN.componentRegister.
3. Route Mounting: After finding the corresponding () => import(...) function, it uses it as the component argument to dynamically add it to the routing system via router.addRoute.

Best Practices

• Uniqueness: Ensure that the Keys in register.js are globally unique.
• On-demand Loading: Always use the arrow function form () => import(...) to ensure components are loaded only when accessed (code splitting), thereby optimizing initial load performance.
• Naming Conventions: It is recommended that Key naming remains semantically consistent with file paths or business functions to facilitate maintenance.

FAQ

Q: Why can't I use the path returned by the backend directly?A: Build tools (Vite/Webpack) need to know the exact file dependencies during packaging. If fully dynamic variables (like import(serverPath)) are used, the build tool cannot determine which files need to be packaged, resulting in the module not being found at runtime. Using register.js is equivalent to telling the build tool: "These files might be used, please package them."

Q: Why do I see a "Component not found" warning after adding a new page?A: Please check the following two points:

1. Whether the configuration for that page has been added to register.js.
2. Whether the label field in the menu data returned by the backend matches the Key in register.js exactly (case-sensitive).