simplify and optimize dynamic route registration

This commit is contained in:
jingrow 2025-11-21 13:24:59 +08:00
parent 06283becab
commit 984d23723e
2 changed files with 5 additions and 65 deletions

View File

@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import type { Router } from 'vue-router'
import { t } from '../i18n'
import { registerToolRoute, unregisterToolRoute, syncToolRoutes, registerAllToolRoutes } from '../utils/dynamicRoutes'
import { registerToolRoute, unregisterToolRoute, registerAllToolRoutes } from '../utils/dynamicRoutes'
export interface Tool {
id: string
@ -203,11 +203,6 @@ export const useToolsStore = defineStore('tools', () => {
registerAllToolRoutes(router, userTools.value)
}
// 同步工具路由(移除不存在的,添加新的)
function syncRoutes(router: Router) {
syncToolRoutes(router, userTools.value)
}
return {
userTools,
hiddenDefaultToolIds,
@ -220,8 +215,7 @@ export const useToolsStore = defineStore('tools', () => {
showDefaultTool,
updateUserToolsOrder,
getDefaultTools,
initToolRoutes,
syncRoutes
initToolRoutes
}
})

View File

@ -27,17 +27,8 @@ export function registerToolRoute(
return false
}
// 确定组件路径
// 1. 如果提供了 componentPath使用它
// 2. 如果工具有 componentPath 属性,使用它
// 3. 默认使用 tools/{routeName}.vue
const finalComponentPath =
componentPath ||
tool.componentPath ||
`../../views/tools/${tool.routeName}.vue`
// 构建路由路径
// 默认使用 tools/{id},但可以通过 tool.routePath 自定义
// 确定组件路径和路由路径
const finalComponentPath = componentPath || tool.componentPath || `../../views/tools/${tool.routeName}.vue`
const routePath = tool.routePath || `tools/${tool.id}`
// 创建路由配置,添加组件加载错误处理
@ -62,14 +53,7 @@ export function registerToolRoute(
try {
// 将路由添加到 AppLayout 的 children 下
// AppLayout 路由应该在应用启动时已存在
const parentRouteName = router.hasRoute('AppLayout') ? 'AppLayout' : null
if (parentRouteName) {
router.addRoute(parentRouteName, route)
} else {
// 如果 AppLayout 不存在,直接添加到根路由(不应该发生,但作为降级方案)
console.warn('AppLayout route not found, adding tool route to root')
router.addRoute(route)
}
router.addRoute('AppLayout', route)
console.log(`Tool route registered: ${tool.routeName} -> ${routePath}`)
return true
} catch (error) {
@ -113,41 +97,3 @@ export function registerAllToolRoutes(router: Router, tools: Tool[]): void {
console.log(`Registered ${routeTools.length} tool routes`)
}
/**
*
* @param router Vue Router
* @param currentTools
*/
export function syncToolRoutes(router: Router, currentTools: Tool[]): void {
// 获取所有已注册的路由
const registeredRoutes = router.getRoutes()
// 找出所有工具路由(通过 meta.toolId 识别)
const toolRoutes = registeredRoutes.filter((route) =>
route.meta?.toolId && !route.meta?.isDefault
)
// 当前应该存在的工具路由名称
const currentRouteNames = new Set(
currentTools
.filter(t => t.type === 'route' && t.routeName && !t.isDefault)
.map(t => t.routeName!)
)
// 移除不再存在的工具路由
toolRoutes.forEach((route) => {
if (route.name && typeof route.name === 'string' && !currentRouteNames.has(route.name)) {
unregisterToolRoute(router, route.name)
}
})
// 添加新的工具路由
currentTools
.filter(t => t.type === 'route' && t.routeName && !t.isDefault)
.forEach(tool => {
if (tool.routeName && !router.hasRoute(tool.routeName)) {
registerToolRoute(router, tool)
}
})
}