Update dynamicRoutes.ts to properly convert componentPath relative
to src/views into import path relative to current file
This commit is contained in:
parent
0a702791df
commit
82dc1bfc7e
@ -76,23 +76,52 @@ export function registerToolRoute(
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 确定组件路径和路由路径
|
// 确定组件路径和路由路径
|
||||||
// 默认路径:tools/{tool_id}/{tool_id}.vue(每个工具独立文件夹,入口文件与工具ID一致)
|
// componentPath 格式:tools/{tool_name}/{tool_name}.vue(相对于 src/views)
|
||||||
const defaultComponentPath = toolWithRoutes.componentPath || `../../views/tools/${toolWithRoutes.id}/${toolWithRoutes.id}.vue`
|
// 需要转换为相对于当前文件的路径:../../views/tools/{tool_name}/{tool_name}.vue
|
||||||
const finalComponentPath = componentPath || defaultComponentPath
|
let finalComponentPath: string
|
||||||
const routePath = toolWithRoutes.routePath || `tools/${toolWithRoutes.id}`
|
if (componentPath) {
|
||||||
|
// 如果 componentPath 已经是相对于 src/views 的路径(如 tools/test_tool/test_tool.vue)
|
||||||
|
// 需要转换为相对于当前文件的路径
|
||||||
|
finalComponentPath = `../../views/${componentPath}`
|
||||||
|
} else if (toolWithRoutes.componentPath) {
|
||||||
|
// 如果 tool 对象中有 componentPath
|
||||||
|
finalComponentPath = `../../views/${toolWithRoutes.componentPath}`
|
||||||
|
} else {
|
||||||
|
// 默认路径:使用 toolName 或 id
|
||||||
|
const toolDirName = toolWithRoutes.toolName || toolWithRoutes.id
|
||||||
|
finalComponentPath = `../../views/tools/${toolDirName}/${toolDirName}.vue`
|
||||||
|
}
|
||||||
|
const routePath = toolWithRoutes.routePath || `tools/${toolWithRoutes.toolName || toolWithRoutes.id}`
|
||||||
|
|
||||||
// 创建路由配置,添加组件加载错误处理
|
// 创建路由配置,添加组件加载错误处理
|
||||||
|
console.log(`Registering tool route:`, {
|
||||||
|
routeName: toolWithRoutes.routeName,
|
||||||
|
routePath,
|
||||||
|
componentPath: finalComponentPath,
|
||||||
|
toolName: toolWithRoutes.toolName,
|
||||||
|
id: toolWithRoutes.id
|
||||||
|
})
|
||||||
|
|
||||||
const route: RouteRecordRaw = {
|
const route: RouteRecordRaw = {
|
||||||
path: routePath,
|
path: routePath,
|
||||||
name: toolWithRoutes.routeName,
|
name: toolWithRoutes.routeName,
|
||||||
component: () => import(finalComponentPath).catch((error) => {
|
component: () => {
|
||||||
console.error(`Failed to load tool component: ${finalComponentPath}`, error)
|
console.log(`Loading tool component from: ${finalComponentPath}`)
|
||||||
// 返回一个简单的错误组件
|
return import(finalComponentPath).catch((error) => {
|
||||||
return {
|
console.error(`Failed to load tool component: ${finalComponentPath}`, error)
|
||||||
name: 'ToolComponentError',
|
// 返回一个简单的错误组件,显示详细错误信息
|
||||||
template: '<div style="padding: 20px; text-align: center;"><h3>Component Not Found</h3><p>Failed to load component</p></div>'
|
return {
|
||||||
}
|
name: 'ToolComponentError',
|
||||||
}),
|
template: `
|
||||||
|
<div style="padding: 20px; text-align: center;">
|
||||||
|
<h3>Component Not Found</h3>
|
||||||
|
<p>Failed to load component: ${finalComponentPath}</p>
|
||||||
|
<p style="color: #666; font-size: 12px; margin-top: 10px;">Error: ${error.message || error}</p>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
meta: {
|
meta: {
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
toolId: toolWithRoutes.id,
|
toolId: toolWithRoutes.id,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user