119 lines
3.3 KiB
TypeScript
119 lines
3.3 KiB
TypeScript
import {
|
|
createRouter,
|
|
createWebHashHistory,
|
|
type RouteRecordRaw,
|
|
} 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
|
|
*/
|
|
function generateRoutesFromPages(): RouteRecordRaw[] {
|
|
const routes: RouteRecordRaw[] = [];
|
|
|
|
const pages = 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().endsWith("/home")
|
|
? routePath.slice(0, -5)
|
|
: routePath;
|
|
|
|
routes.push({
|
|
path: finalPath,
|
|
name: routePath,
|
|
component: pages[path],
|
|
});
|
|
}
|
|
|
|
return routes;
|
|
}
|
|
|
|
// Generate routes from pages directory
|
|
const routes: RouteRecordRaw[] = generateRoutesFromPages();
|
|
|
|
// 添加额外的路由配置，特别是带参数的路由
|
|
const extraRoutes: RouteRecordRaw[] = [
|
|
{
|
|
path: "/user/profile/:id",
|
|
name: "UserProfile",
|
|
component: () => import("@/pages/user/ProfilePage.vue"),
|
|
},
|
|
{
|
|
path: "/product/detail/:id",
|
|
name: "ProductDetail",
|
|
component: () => import("@/pages/product/DetailPage.vue"),
|
|
},
|
|
// 可以在这里添加其他需要特殊配置的路由
|
|
];
|
|
|
|
// 合并自动生成的路由和额外的路由
|
|
const allRoutes = [...routes, ...extraRoutes];
|
|
|
|
const router = createRouter({
|
|
history: createWebHashHistory(),
|
|
routes: allRoutes,
|
|
});
|
|
|
|
export default router;
|