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 @@
-
-
-
-
-
-
-
关于我们
-
这是一个自动路由注册的示例页面
-
路径将自动转换为 /about
-
-
-
-
-
-
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 @@
-
-
-
-
-
-
-
我的
-
这是一个自动路由注册的示例页面
-
路径将自动转换为 /panel/me
-
-
-
-
-
-
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,