Routing Guide

Setup

import { createRouter } from 'nexa-router'
import Home from './Home.nexa'
import UserProfile from './UserProfile.nexa'

const router = createRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/user/:id', component: UserProfile },
    { path: '*', component: NotFound },
  ],
  mode: 'history',
})

RouterView

Use the RouterView component to automatically render the active route:

<template>
  <RouterView :router="router" />
</template>

Dynamic Parameters

Parameters and query strings are available as reactive signals:

router.params.value // { id: '123' }
router.query.value  // { q: 'search' }

Navigation with Link

The Link component handles client-side navigation seamlessly:

<template>
  <Link to="/user/42" :router="router">View Profile</Link>
</template>

Programmatic Navigation

// Navigate runs guards before changing the route
await router.navigate('/dashboard')

Route Guards

Guards protect routes by running before each navigation. If any guard returns false, the navigation is blocked.

// Register guards after creating the router
router.beforeEach((to, from) => {
  return isAuthenticated || to === '/login'
})

// Guards also work with async checks
router.beforeEach(async (to, from) => {
  const allowed = await checkPermission(to)
  return allowed
})

Guards can also be provided at creation time:

const router = createRouter({
  routes: [...],
  guards: {
    beforeEach: [
      (to, from) => isAuthenticated || to === '/login',
    ]
  }
})