RouterInstance
Signature
ts
interface RouterInstance extends GlobalGuards {
router: DataRouter;
RouterProvider: FunctionComponent;
clearAll: () => void;
getRoutes: () => Readonly<GlobalRouteConfig>;
addRoute: {
(route: RouteConfig): void;
(parentName: string, route: RouteConfig): void;
};
hasRoute: (name: string) => boolean;
resolve: (to: string | RouterOptions) => RouteLocation;
}Parameters
RouterInstance is returned by createRouter(options) and takes no direct parameters.
Returns
Core members:
router: underlying DataRouter (navigateetc.)RouterProvider: root provider component- guard methods:
beforeEach/beforeResolve/afterEach/onError - extension methods:
addRoute/hasRoute/resolve/getRoutes/clearAll
Behavior Details
- Guard registration methods return unregister callbacks.
resolve()returns fullRouteLocationincludingmatched/meta/state.addRoutesupports top-level and parent-name insertion forms.
Error / Failure Semantics
- Missing parent in
addRoute(parentName, route)throws. - Guard exceptions are forwarded to
onError. afterEachreceives optionalfailure, checkable byisNavigationFailure.
Example
tsx
const router = createRouter({ routes, history: createWebHistory() });
const offBeforeEach = router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthed()) {
next('/login');
return;
}
next();
});
router.afterEach((to, from, failure) => {
if (failure) {
console.log('failure', failure.type);
}
});
if (!router.hasRoute('runtime')) {
router.addRoute({ path: '/runtime', name: 'runtime', component: <RuntimePage /> });
}
const location = router.resolve({ name: 'runtime', query: { from: 'menu' } });
console.log(location.fullPath);
offBeforeEach();