Route String

For a page /pages/film.page.js, a Route String can be defined in a /pages/film.page.route.js adjacent file.

// /pages/film.page.route.js

// Match URLs `/film/1`, `/film/2`, ...
export default '/film/:filmId'

The value of filmId is available at pageContext.routeParams.filmId.

Multiple Parameters

We can define multiple parameters.

// /pages/film.page.route.js

// Parameters available at:
//  - `pageContext.routeParams.year`
//  - `pageContext.routeParams.slug`
export default '/news/:year/:slug'

Catch-All

We can use Route Strings to implement catch-all routes.

Precedence

Upon Route String conflicts, vite-plugin-ssr chooses the first route in following order:

1. Most specific /about/team (matches only a single URL)
2. Less specific /about/:path (also matches /about/company, /about/vision, ...)
3. Less specific /about/* (also matches /about/also/nested/path)
4. Least specific /* (matches all URLs)

Further examples can be found at precedence.spec.ts.

More

For more advanced routing, we can use Route Functions which are fundamentally more powerful than Route Strings.