Route String

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

// /pages/

// 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/

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


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


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.


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