From 110aec7d5f4baa297e389527dc62285170fdc828 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=B7=E7=A5=9E=E7=A5=9E=E7=A5=9E?= Date: Thu, 29 Jan 2026 20:57:04 +0800 Subject: [PATCH] feat: optimize router logic --- bun.lock | 3 +- eslint.config.js | 1 + src/pages/AboutPage.vue | 19 ----- src/pages/HelpPage.vue | 77 -------------------- src/pages/{HomePage.vue => index.vue} | 4 +- src/pages/panel/MePage.vue | 15 ---- src/router/index.ts | 100 ++++++++------------------ 7 files changed, 35 insertions(+), 184 deletions(-) delete mode 100644 src/pages/AboutPage.vue delete mode 100644 src/pages/HelpPage.vue rename src/pages/{HomePage.vue => index.vue} (71%) delete mode 100644 src/pages/panel/MePage.vue diff --git a/bun.lock b/bun.lock index 3f92230..31843f1 100644 --- a/bun.lock +++ b/bun.lock @@ -1,5 +1,6 @@ { - "lockfileVersion": 0, + "lockfileVersion": 1, + "configVersion": 0, "workspaces": { "": { "name": "template-vue-hucky", diff --git a/eslint.config.js b/eslint.config.js index e8960f7..f092f77 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -23,6 +23,7 @@ export default typescriptEslint.config( rules: { "vue/singleline-html-element-content-newline": "off", "vue/max-attributes-per-line": "off", + "vue/multi-word-component-names": "off", }, }, ); diff --git a/src/pages/AboutPage.vue b/src/pages/AboutPage.vue deleted file mode 100644 index 9016e75..0000000 --- a/src/pages/AboutPage.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - - - diff --git a/src/pages/HelpPage.vue b/src/pages/HelpPage.vue deleted file mode 100644 index 17cbabb..0000000 --- a/src/pages/HelpPage.vue +++ /dev/null @@ -1,77 +0,0 @@ - - - - - diff --git a/src/pages/HomePage.vue b/src/pages/index.vue similarity index 71% rename from src/pages/HomePage.vue rename to src/pages/index.vue index cad4e86..1c10fdb 100644 --- a/src/pages/HomePage.vue +++ b/src/pages/index.vue @@ -6,8 +6,8 @@
-

首页

-

欢迎使用自动路由系统

+

Hucky

+

自动路由系统已加载

diff --git a/src/pages/panel/MePage.vue b/src/pages/panel/MePage.vue deleted file mode 100644 index 507d6fe..0000000 --- a/src/pages/panel/MePage.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - - - diff --git a/src/router/index.ts b/src/router/index.ts index 32a25ef..dd77c5b 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -5,91 +5,51 @@ import { } from "vue-router"; /** - * Convert PascalCase to kebab-case and remove 'Page' suffix - * @param name PascalCase name (e.g., AboutMePage) - * @returns kebab-case path (e.g., about-me) - */ -function formatPathFromComponentName(name: string): string { - // Remove .vue extension if present - const baseName = name.endsWith(".vue") ? name.slice(0, -4) : name; - - // Remove Page suffix if present - const withoutPageSuffix = baseName.endsWith("Page") - ? baseName.slice(0, -4) - : baseName; - - // Convert PascalCase to kebab-case - return withoutPageSuffix - .replace(/([a-z0-9])([A-Z])/g, "$1-$2") - .replace(/([A-Z])([A-Z][a-z])/g, "$1-$2") - .toLowerCase(); -} - -/** - * Extract component name from file path - * @param filePath Path to the component file - * @returns Component name without extension - */ -function getComponentNameFromPath(filePath: string): string { - // Get the file name from the path - return filePath.split("/").pop() || ""; -} - -/** - * Generate route path from full file path, preserving directory structure - * @param filePath Full path to the component file (e.g., "@/pages/test/AbcPage.vue") - * @returns Route path (e.g., "/test/abc") - */ -function generateRoutePathFromFilePath(filePath: string): string { - // Remove the "@/pages" prefix and get the relative path - const relativePath = filePath.replace(/^@\/pages\//, ""); - - // Split into directory parts and filename - const pathParts = relativePath.split("/"); - const fileName = pathParts.pop() || ""; - const directories = pathParts.splice(3); - - // Transform the filename using existing logic - const transformedFileName = formatPathFromComponentName(fileName); - - // Combine directory path with transformed filename - const fullPath = - directories.length > 0 - ? `/${directories.join("/")}/${transformedFileName}` - : `/${transformedFileName}`; - - return fullPath; -} - -/** - * Generate routes from page components using Vite's import.meta.glob - * @returns Array of route configurations + * 通过 vite 的 meta.glob 从文件系统读取路由文件 + * @returns 适配 vue router 的路由数组 */ function generateRoutesFromPages(): RouteRecordRaw[] { const routes: RouteRecordRaw[] = []; - const pages = import.meta.glob("@/pages/**/*.vue"); + // @ 路径已经在 vite 和 ts 进行配置 + // 仅读取 .vue 结尾的文件 + const pagePathMap = import.meta.glob("@/pages/**/*.vue"); - for (const path in pages) { - const componentName = getComponentNameFromPath(path); - const routePath = generateRoutePathFromFilePath(path); - - // Special case for home page - const finalPath = routePath.toLowerCase() === "/home" ? "/" : routePath; + for (const path in pagePathMap) { + const routePath = getRoutePathFromFilePath(path); routes.push({ - path: finalPath, - name: componentName, - component: pages[path], + path: routePath, + component: pagePathMap[path], }); } return routes; } -// Generate routes from pages directory +/** + * 根据文件系统路径生成路由路径 + * @param filePath Full path to the component file (e.g., "@/pages/test/AbcPage.vue") + * @returns Route path (e.g., "test/abc") + */ +function getRoutePathFromFilePath(filePath: string): string { + // 移除 "/src/pages/" 前缀和 ".vue" 后缀获得相对路径 + const relativePath = filePath + .replace(/^\/src\/pages\//, "") + .replace(/\.vue$/, ""); + + // 将 index 替换为空并将结尾多余的 / 符号删除 + const noIndexPath = relativePath.replace(/index/, "").replace(/\/$/, ""); + + // 将路径调整成以 / 开头 + const intactPath = `/${noIndexPath}`; + + return intactPath; +} + const routes: RouteRecordRaw[] = generateRoutesFromPages(); +// WebHash 使用 /# 开头处理前端页面路由 const router = createRouter({ history: createWebHashHistory(), routes,