API

Router API

The TSone router is installed as a plugin, and RouterView renders the component for the current route.

createRouter

import { createRouter } from '@geektech/tsone/router';

const router = createRouter({
  mode: 'history',
  base: '/',
  routes: [
    { path: '/', name: 'home', component: HomePage },
    { path: '/users/:id', name: 'user', component: UserPage, meta: { title: 'User Details' } },
  ],
});

A minimal configuration can be written as createRouter({ routes: [...] }).

Navigation guards, redirects, and catch-all routes

router.beforeEach(guard) registers a global before guard: returning false cancels the navigation, returning a string redirects to that path, and returning true or undefined allows it. router.afterEach(hook) runs after the navigation is committed. Guards run on programmatic navigation (push/replace) only. RouteRecord.redirect resolves a route to its target path (loop-protected), and path: '*' matches every otherwise unmatched path, with the remaining path available as params.pathMatch.

import { createRouter } from '@geektech/tsone/router';

const router = createRouter({
  routes: [
    { path: '/', component: HomePage },
    { path: '/old', redirect: '/new' },
    { path: '/new', component: NewPage },
    { path: '*', component: NotFoundPage },
  ],
});

router.beforeEach((to, from) => {
  if (to.path === '/admin') return false;
  return true;
});
router.afterEach((to) => {
  document.title = String(to.meta?.title ?? '');
});

RouterOptions

interface RouterOptions {
  routes: RouteRecord[];
  mode?: 'history' | 'hash';
  base?: string;
}

RouteRecord

interface RouteRecord {
  path: string;
  component?: ComponentConstructor;
  redirect?: string;
  name?: string;
  meta?: Record<string, unknown>;
}

path supports dynamic parameters such as /users/:id.

RouterView

import { Component, VNode } from '@geektech/tsone';
import { RouterView } from '@geektech/tsone/router';

class Layout extends Component<object, object> {
  protected initState() {
    return {};
  }

  protected initStyles(): void {}

  protected render(): VNode {
    return {
      tag: 'main',
      children: [{ component: RouterView }],
    };
  }
}

RouterLink

import { RouterLink } from '@geektech/tsone/router';

{
  component: RouterLink,
  props: {
    to: '/users/42',
    activeClass: 'is-active',
    children: ['User Details'],
  },
}

RouterLink renders an a element and calls router.push() or router.replace() when clicked.

Router Methods

• push(path) / replace(path): navigates to a new path
• back() / forward() / go(n): controls browser history
• getCurrentRoute(): returns the current route location
• getCurrentRouteRecord(): returns the currently matched route record
• onRouteChange(callback): registers a route-change listener
• addRoute(record): adds a route dynamically
• createHref(path): generates a link URL from the mode and base
• destroy(): removes event listeners and detaches the router reference from the application