Router Push

useRouterPush is a type-safe wrapper around vue-router — route names are TS-checked, so typos fail at compile time.

import { useRouterPush } from '@/hooks/common/router';

const {
  routerPush,           // forwards router.push
  routerBack,           // router.back
  routerPushByKey,      // navigate by RouteKey (recommended)
  toLogin,              // go to login
  toHome,               // go to current user's home
  redirectFromLogin,    // post-login: jump to redirect query
} = useRouterPush();

Navigate by key (recommended)

RouteKey is a union of all valid route names, auto-generated by Elegant Router.

routerPushByKey('manage_user');                                 // → /manage/user
routerPushByKey('manage_user-detail', { params: { id: '1' } });  // → /manage/user-detail/1
routerPushByKey('function_request', {
  query: { from: 'home' }
});

// Open in new tab
routerPushByKey('manage_user', undefined, true);

A typo in the key triggers a TypeScript error — safer than hand-typed paths.

Direct path navigation

When you need a string path (e.g. assembled at runtime from backend data):

routerPush('/manage/user');
routerPush({ path: '/manage/user', query: { tab: 'enabled' } });

Login / post-login redirect

toLogin();                       // jump to login
toLogin('/manage/user');         // login + then redirect to /manage/user

redirectFromLogin();             // login-page side: read query.redirect and go

route.ts guard already writes to.fullPath to query.redirect when intercepting unauthenticated requests; the login page just calls redirectFromLogin() after success.

Back

routerBack();                    // history.back

If a detail link was opened directly (no history), it falls back to home — no blank page.

Go to user's home

toHome();

The home route name comes from userInfo.role.routeHomeName (backend by_role_home per role). The same button can land a super-admin on /manage/api and a regular user on /home — per-role default entry.

Outside components

useRouterPush must be called inside setup / hook context. For services / stores:

import { router } from '@/router';
router.push({ name: 'login' });

web/src/router/index.ts exports the router instance for exactly this case.

Navigation animation / loading

The progress bar on navigation is handled automatically by src/router/guard/progress.ts using NProgress — no manual wiring.

See also

• Route guard
• Create routes