Edit this page

Route String

For a page /pages/movie/+Page.js, you can define its Route String in an adjacent file /pages/movie/+route.js.

// /pages/movie/+route.js
 
// Match URLs such as /movie/123 or /movie/abc
export default '/movie/@id'

Route Strings and Route Functions override Filesystem Routing. If you always use Route Strings and Route Functions then you effectively opt-out of Filesystem Routing.

The value @id is available at pageContext.routeParams.id.

URL                   MATCH    pageContext.routeParams.id
==================    =====    ==========================
/movie/123            ✅       123
/movie/abc            ✅       abc
/movie/9Ab(@29!c      ✅       9Ab(@29!c
/movie/123/reviews    ❌
/movie                ❌

You can define:

• Multiple parameters, for example /movie/@category/@name.
• Globs, for example /movie/* to also match /movie/123/reviews.

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

Globs

// /pages/product/+route.js
 
export default '/product/*'

URL                         MATCH /product/@id    MATCH /product/*    MATCH /product*
========================    ==================    ================    ===============
/product/123                ✅                    ✅                  ✅
/product/123/nested         ❌                    ✅                  ✅
/product/123/nested/path    ❌                    ✅                  ✅
/product                    ❌                    ❌                  ✅

The value of the glob is available at pageContext.routeParams['*'], for example for the Route String /product/*:

URL                          pageContext.routeParams['*']
=========================    ============================
/product/123                 123
/product/123/nested          123/nested
/product/123/nested/path/    123/nested/path/

If you define multiple globs (e.g. /*/movie/@id/*), their values are available at:

• pageContext.routeParams['*1']
• pageContext.routeParams['*2']
• pageContext.routeParams['*3']
• ...

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 single page of our app.
export { Page }
 
// ...

Precedence

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

See API > Routing Precedence.

Escape @

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

See also

• Guides > Routing