dojo dragon main logo

路由配置

路由配置是一个分层结构,用于描述整个 Dojo 应用程序,将 idoutlet 与路由路径关联起来。路由路径可以使用子级进行嵌套,从而构建一个能够准确反映应用程序需求的路由结构。

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

  • id: string: 路由的唯一 ID。
  • path: string: URL 中要匹配的路由路径段。
  • outlet: string: 路由的 outlet 名称。这由 Outlet 小部件用于确定需要渲染的内容。
  • defaultRoute: boolean(可选):将出口标记为默认出口,如果在应用程序加载时未找到路由或找到未知路由,应用程序将自动重定向到此路由。
  • defaultParams: { [index: string]: string }(可选):关联的默认参数(pathquery),如果默认路由具有必需的参数,则需要此参数。
  • 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-companyabout-history 相冲突,但是 Dojo 路由确保在这些情况下匹配正确的路由。