路由元数据
您可以在注册路由时附加自定义元数据（例如页面布局、面包屑、权限或访问角色）。
元数据按照注册的路线模式存储。调用 getRouteMeta 时使用相同的模式。
附加元数据
在 registerRoute 的选项配置中传递元数据：
javascript
import { registerRoute } from '@beforesemicolon/router'
registerRoute('/admin/:section', {
exact: true,
meta: {
title: 'Admin Console',
requiresAuth: true,
allowedRoles: ['admin', 'moderator'],
breadcrumb: 'Home > Admin > Dashboard',
},
})检索元数据 (getRouteMeta)
检索与已注册路径模式关联的元数据对象。
typescript
function getRouteMeta(pattern: string): RouteMeta | undefined示例
javascript
import { getRouteMeta } from '@beforesemicolon/router'
const meta = getRouteMeta('/admin/:section')
console.log(meta.title) // "Admin Console"
console.log(meta.requiresAuth) // true常见用例
1. 动态文档标题
在页面转换时动态更新浏览器文档标题：
javascript
import { onPage, getRouteMeta } from '@beforesemicolon/router'
onPage('/admin/:section', (active) => {
if (active) {
const meta = getRouteMeta('/admin/:section')
document.title = meta?.title
? `${meta.title} | My App`
: 'Admin | My App'
}
})2. 权限守护
动态检查路由防护内的权限：
javascript
import { registerRouteGuard, getRouteMeta } from '@beforesemicolon/router'
registerRouteGuard('/admin/:section', () => {
const meta = getRouteMeta('/admin/:section')
if (meta?.requiresAuth && !userIsLoggedIn()) {
return '/login' // Redirect
}
if (meta?.allowedRoles && !userHasRoles(meta.allowedRoles)) {
return '/unauthorized' // Redirect
}
return true // Allow
})