历史管理器

Dojo 路由自带三个历史管理器，用于管理应用程序的导航状态，分别是 HashHistory、StateHistory 和 MemoryHistory。默认使用 HashHistory，但是可在创建 Router 或者使用 registerRouterInjector 时传入不同的 HistoryManager 以覆盖默认的历史管理器。

src/main.ts

import Router from '@dojo/framework/routing/Router';
import StateHistory from '@dojo/framework/routing/history/StateHistory';

import routes from './routes';

// creates a router using the default history manager, `HashHistory`
const router = new Router(routes);

// creates a router using the `StateHistory`
const routerWithHistoryOverride = new Router(routes, { HistoryManager: StateHistory });

或者使用 registerRouterInjector 帮助函数：

src/main.ts

import Registry from '@dojo/framework/core/Registry';
import { registerRouterInjector } from '@dojo/framework/routing/RouterInjector';
import StateHistory from '@dojo/framework/routing/history/StateHistory';

import routes from './routes';

const registry = new Registry();

// creates and registers a router using the default history manager, `HashHistory`
registerRouterInjector(routes, registry);

// creates and registers a router using the `StateHistory`
registerRouterInjector(routes, registry, { HistoryManager: StateHistory });

`HashHistory`

HashHistory 使用片段标识符（fragment identifier）来处理路由变更，比如 https://foo.com/#home 中的 home 就是路由的路径。因为 HashHistory 是默认管理器，因此不需要导入模块。

import { Router } from '@dojo/framework/routing/Router';

const router = new Router(config);

`StateHistory`

StateHistory 使用浏览器的 history API 管理应用程序的路由变更。

StateHistory 管理器需要在服务器端支持应用程序的路由刷新机制，例如：

重写 index.html 请求，以从应用程序根目录加载。
重写加载静态资源（.js、.css等）的请求，以从应用程序根目录加载。

注意： 当使用 @dojo/cli-build-app 的 --serve 选项时，本机制已经包含在其中（仅用于开发环境）。

import { Router } from '@dojo/framework/routing/Router';
import { StateHistory } from '@dojo/framework/routing/history/StateHistory';

const router = new Router(config, { HistoryManager: StateHistory });

`MemoryHistory`

MemoryHistory 不依赖任何浏览器 API，而是自己保存内部的路径状态。不要在生产应用程序中使用它，但在测试路由时却很有用。

import { Router } from '@dojo/framework/routing/Router';
import { MemoryHistory } from '@dojo/framework/routing/history/MemoryHistory';

const router = new Router(config, { HistoryManager: MemoryHistory });

src/main.tsx

import renderer from '@dojo/framework/core/vdom';
import { tsx } from '@dojo/framework/core/vdom';
import { registerRouterInjector } from '@dojo/framework/routing/RouterInjector';

import routes from './routes';
import App from './App';

const registry = new Registry();
// creates a router with the routes and registers the router with the registry
registerRouterInjector(routes, registry);

const r = renderer(() => <App />);
r.mount({ registry });

这些历史管理器的实现原理与适配器类似，这意味着可以通过实现历史管理器接口来实现自定义的历史管理器。