路由配置
路由配置是一个分层结构,用于描述整个 Dojo 应用程序,将 id
和 outlet
与路由路径关联起来。路由路径可以使用子级进行嵌套,从而构建一个能够准确反映应用程序需求的路由结构。
路由配置 API 由以下属性构成:
id: string
: 路由的唯一 ID。path: string
: URL 中要匹配的路由路径段。outlet: string
: 路由的outlet
名称。这由Outlet
小部件用于确定需要渲染的内容。defaultRoute: boolean
(可选):将出口标记为默认出口,如果在应用程序加载时未找到路由或找到未知路由,应用程序将自动重定向到此路由。defaultParams: { [index: string]: string }
(可选):关联的默认参数(path
和query
),如果默认路由具有必需的参数,则需要此参数。redirect: string
(可选):当完全匹配时要重定向到的路径,可以使用{}
语法从匹配的路由中引用参数。children: RouteConfig[]
(可选):嵌套的子路由配置。
src/routes.ts
export default [
{
id: 'home',
path: 'home',
outlet: 'home',
defaultRoute: true
},
{
id: 'about',
path: 'about',
outlet: 'about-overview',
redirect: 'about/company'
children: [
{
id: 'about-services',
path: '{services}',
outlet: 'about'
},
{
id: 'about-company',
path: 'company',
outlet: 'about'
},
{
id: 'about-history',
path: 'history',
outlet: 'about'
}
]
}
];
此示例将注册以下路径和路由 ID:
URL 路径 | 路由 |
---|---|
/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 路由确保在这些情况下匹配正确的路由。