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

// Matches the URLs:
//  /film/1
//  /film/2
//  /film/a
//  /film/b
//  ...
export default '/film/@filmId'

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

You can define:

• Multiple parameters, for example /film/@category/@name.
• Globs, for example /product/*.

For more advanced routing logic, consider using a Route Function instead of Route String.

Globs

// product.page.route.js

// Match URLs that start with `/product/*`:
// `/product/42`
// `/product/1337/details`
// `/product/2048/some/deeply/nested/path`
//  ...
export default '/product/*'

The value of the glob is available at pageContext.routeParams['*'].

The difference between /product/* and /product/@productId is that the former includes nested paths whereas the latter doesn't. For example /product/42/details matches /product/* but doesn't match /product/@productId.

If you define multiple globs, then the glob values are available at pageContext.routeParams['*1'], pageContext.routeParams['*2'], etc.

Catch-All

You can use a glob to catch all URLs:

// catch-all.page.route.js

// Route all URLs to a single page
export default '*'

// catch-all.page.js

// The only page of our app.
export { Page }

// ...

Precedence

Upon Route String conflicts, Vike chooses the first route from most specific to least specific.

See Routing > Routing Precedence.

Escape @

The special character @ cannot be escaped, use a Route Function instead.

Domain-driven file structure

As with Filesystem Routing a domain-driven file structure is possible, such as:

FILESYSTEM
user/pages/list.page.js
user/pages/list.page.route.js
user/pages/create.page.js
user/pages/create.page.route.js
todo/pages/list.page.js
todo/pages/list.page.route.js
todo/pages/create.page.js
todo/pages/create.page.route.js