ルート文字列

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

// /pages/film/+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

// /pages/product/+route.js
 
// Match URLs that start with /product/* such as:
//   /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:

// /pages/catch-all/+route.js
 
// Route all URLs to a single page
export default '*'

// /pages/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 ルーティング > ルーティングの優先順位.

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/+route.js
user/pages/create/+Page.js
user/pages/create/+route.js
todo/pages/list/+Page.js
todo/pages/list/+route.js
todo/pages/create/+Page.js
todo/pages/create/+route.js