历史管理器

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 使用片段标识符来处理路由更改，例如 https://foo.com/#home 将处理 home 作为路由路径。由于 HashHistory 是默认管理器，因此您无需导入模块。

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

const router = new Router(config);

`StateHistory`

StateHistory 使用浏览器的历史 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 });

这些历史管理器就像适配器一样，这意味着可以通过实现历史管理器接口来实现自定义历史管理器。