dojo dragon main logo

历史管理器

Dojo 路由自带三个历史管理器,用于管理应用程序的导航状态,分别是 HashHistoryStateHistoryMemoryHistory。默认使用 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 管理器需要在服务器端支持应用程序的路由刷新机制,例如:

  1. 重写 index.html 请求,以从应用程序根目录加载。
  2. 重写加载静态资源(.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 });

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