配置路由

路由配置是一个层级结构,用于描述整个应用程序,将 idoutlet 与路由路径关联起来。路由的路径中可以嵌套子路由,这样就可以构建出一个能精准反应应用程序需求的路由结构。

路由配置 API 由以下属性组成:

  • id: string: 路由的唯一标识。
  • path: string: 与 URL 匹配的路由路径片段。
  • outlet: string: 路由的 outlet 名称,Outlet 部件使用该值确定要渲染的内容。
  • defaultRoute: boolean (可选): 将此 Outlet 标记为默认路由,当应用程序加载时,如果没有配置路由或未找到路由,则应用程序会自动跳转到此路由。
  • defaultParams: { [index: string]: string } (可选): 相关的默认参数(pathquery),如果默认路由有必填的参数,则此项必填。
  • children: RouteConfig[] (可选): 嵌套的子路由配置。

src/routes.ts

  1. export default [
  2. {
  3. id: 'home',
  4. path: 'home',
  5. outlet: 'home',
  6. defaultRoute: true
  7. },
  8. {
  9. id: 'about',
  10. path: 'about',
  11. outlet: 'about-overview',
  12. children: [
  13. {
  14. id: 'about-services',
  15. path: '{services}',
  16. outlet: 'about'
  17. },
  18. {
  19. id: 'about-company',
  20. path: 'company',
  21. outlet: 'about'
  22. },
  23. {
  24. id: 'about-history',
  25. path: 'history',
  26. outlet: 'about'
  27. }
  28. ]
  29. }
  30. ];

本示例将注册以下路径和路由标识:

URL PathRoute
/homehome
/aboutabout-overview
/about/companyabout-company
/about/historyabout-history
/about/knittingabout-services
/about/sewingabout-services

about-services 路由被注册为与 /about 后跟的任何路径匹配,这与注册的 about-companyabout-history 有冲突,但是 Dojo 路由能确保在这些情况下也能匹配出正确的路由。