路由 API

Dojo 路由公开了一个 API,用于生成链接并导航到链接,获取当前路由的参数,并校验路由 id 是否能匹配上。

  • link(route: string, params: Params = {}): string | undefined: 基于路由 id 和可选的参数生成一个链接。如果没有传入参数,将尝试使用当前路由的参数,然后再尝试使用路由配置中提供的默认参数。如果无法生成一个链接,则返回 undefined
  • setPath(path: string): void: S 设置路由中的路径。
  • get currentParams(): { [string: index]: string }: 返回当前路由的参数。
  • getRoute(id: string): RouteContext | undefined: 如果根据路由 id 能够匹配到路由,则返回 RouteContext。如果匹配不到,则返回 undefined

为路由生成链接

src/routes.ts

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

src/main.ts

  1. import Router from '@dojo/framework/routing/Router';
  2. import routes from './routes';
  3. const router = new Router(routes);
  4. // returns `#home`
  5. console.log(router.link('home'));
  6. // returns `#about`
  7. console.log(router.link('about-overview'));
  8. // returns `#about/company`
  9. console.log(router.link('about-company'));
  10. // returns `#about/history`
  11. console.log(router.link('about-history'));
  12. // returns `#about/knitting`
  13. console.log(router.link('about-services'), { services: 'knitting' });
  14. // Uses the current URL then default params to returns `#about/knitting`
  15. // when the current route is `#about/cooking` returns `#about/cooking`
  16. // when the current route does not contain the params returns `#about/sewing`
  17. console.log(router.link('about-services'));
  18. // returns `undefined` for an unknown route
  19. console.log(router.link('unknown'));

更改路由

  1. import Router from '@dojo/framework/routing/Router';
  2. import routes from './routes';
  3. const router = new Router(routes);
  4. // goto `#home` route
  5. router.setPath('#home');

获取当前参数

  1. import Router from '@dojo/framework/routing/Router';
  2. import routes from './routes';
  3. const router = new Router(routes);
  4. // returns the current params for the route
  5. const params = router.currentParams;

获取匹配到的路由

如果根据路由 id 能够匹配到路由,则 getRoute 返回匹配到 RouteContext;如果匹配不到,则返回 undefined

RouteContext:

  • id: string: 路由 id
  • outlet: string: outlet id
  • queryParams: { [index: string]: string }: 匹配到路由的查询参数。
  • params: { [index: string]: string }: 匹配到路由的路径参数。
  • isExact(): boolean: 一个函数,指明路由是否与路径完全匹配。
  • isError(): boolean: 一个函数,指明路由是否与路径匹配错误。
  • type: 'index' | 'partial' | 'error': 路由的匹配类型,值为 indexpartialerror
  1. import Router from '@dojo/framework/routing/Router';
  2. import routes from './routes';
  3. const router = new Router(routes);
  4. // returns the route context if the `home` route is matched, otherwise `undefined`
  5. const routeContext = router.getRoute('home');