Navigation

Link

Link renders an a that navigates without a page load. The active link gets router-link-active, and the exact match router-link-exact-active.

html`<${Link} to="/users/42">User 42</${Link}>`;
html`<${Link} to=${{ path: '/search', query: { q: 'signals' } }}>Search</${Link}>`;

The exact match also gets aria-current="page", so screen readers announce the current page and CSS such as Iris CSS can style it. ariaCurrentValue changes the value, such as "step" in a wizard.

replace replaces the history entry, and activeClass and exactActiveClass rename the classes. NavLink also takes isActive, for your own matching.

From code

useRouter(this) returns the router.

class Logout extends Component {
  protected render() {
    const nav = useRouter(this);
    return html`<button onClick=${() => nav.push('/')}>Log out</button>`;
  }
}

The router also has replace(), back(), forward() and go(delta).

Guards

A guard runs before every navigation, the first one when the app opens and the browser's back and forward buttons included. Return false to cancel it, a path to redirect, or nothing to go on. Add guards for every route with beforeEach(), or for one route with guards.

When a guard cancels a back or forward move, the router steps back to the page on screen, so the page the user tried to open stays in the history. A guard that answers after the user has moved on is ignored.

appRouter.beforeEach(({ to }) => {
  if (to.meta.private && !session.value) return '/login';
});

appRouter.afterEach(() => window.scrollTo(0, 0));