配置路由
路由配置是一个层级结构,用于描述整个应用程序,将 id
和 outlet
与路由路径关联起来。路由的路径中可以嵌套子路由,这样就可以构建出一个能精准反应应用程序需求的路由结构。
路由配置 API 由以下属性组成:
id: string
: 路由的唯一标识。path: string
: 与 URL 匹配的路由路径片段。outlet: string
: 路由的outlet
名称,Outlet
部件使用该值确定要渲染的内容。defaultRoute: boolean
(可选): 将此 Outlet 标记为默认路由,当应用程序加载时,如果没有配置路由或未找到路由,则应用程序会自动跳转到此路由。defaultParams: { [index: string]: string }
(可选): 相关的默认参数(path
和query
),如果默认路由有必填的参数,则此项必填。children: RouteConfig[]
(可选): 嵌套的子路由配置。
src/routes.ts
export default [
{
id: 'home',
path: 'home',
outlet: 'home',
defaultRoute: true
},
{
id: 'about',
path: 'about',
outlet: 'about-overview',
children: [
{
id: 'about-services',
path: '{services}',
outlet: 'about'
},
{
id: 'about-company',
path: 'company',
outlet: 'about'
},
{
id: 'about-history',
path: 'history',
outlet: 'about'
}
]
}
];
本示例将注册以下路径和路由标识:
URL Path | Route |
---|---|
/home | home |
/about | about-overview |
/about/company | about-company |
/about/history | about-history |
/about/knitting | about-services |
/about/sewing | about-services |
about-services
路由被注册为与 /about
后跟的任何路径匹配,这与注册的 about-company
和 about-history
有冲突,但是 Dojo 路由能确保在这些情况下也能匹配出正确的路由。