feat: route path match
This commit is contained in:
15
src/pages/panel/MePage.vue
Normal file
15
src/pages/panel/MePage.vue
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<script lang="ts" setup></script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="hero min-h-screen bg-base-200">
|
||||||
|
<div class="hero-content text-center">
|
||||||
|
<div class="max-w-md">
|
||||||
|
<h1 class="text-5xl font-bold">我的</h1>
|
||||||
|
<p class="py-6">这是一个自动路由注册的示例页面</p>
|
||||||
|
<p>路径将自动转换为 /panel/me</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@@ -35,6 +35,32 @@ function getComponentNameFromPath(filePath: string): string {
|
|||||||
return filePath.split("/").pop() || "";
|
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
|
* Generate routes from page components using Vite's import.meta.glob
|
||||||
* @returns Array of route configurations
|
* @returns Array of route configurations
|
||||||
@@ -46,7 +72,7 @@ function generateRoutesFromPages(): RouteRecordRaw[] {
|
|||||||
|
|
||||||
for (const path in pages) {
|
for (const path in pages) {
|
||||||
const componentName = getComponentNameFromPath(path);
|
const componentName = getComponentNameFromPath(path);
|
||||||
const routePath = `/${formatPathFromComponentName(componentName)}`;
|
const routePath = generateRoutePathFromFilePath(path);
|
||||||
|
|
||||||
// Special case for home page
|
// Special case for home page
|
||||||
const finalPath = routePath.toLowerCase() === "/home" ? "/" : routePath;
|
const finalPath = routePath.toLowerCase() === "/home" ? "/" : routePath;
|
||||||
|
|||||||
Reference in New Issue
Block a user