With Vike we have the choice between:

  • Server Routing and Client Routing.
  • Filesystem Routing, Route Strings and Route Functions.

Server Routing or Client Routing?

Vike has first-class support for both Server-side Routing (full HTML reload upon page navigation) and Client-side Routing (DOM mutations upon page navigation).

The guide Server Routing VS Client Routing helps you choose which one to use.

Route Strings & Route Functions

By default, Vike does Filesystem Routing:

FILESYSTEM                        URL
pages/               /
pages/               /about
pages/faq/           /faq
pages/movie/@id/     /movie/1, /movie/2, /movie/3, ...

We can also define so-called "Route Strings" and "Route Functions".

// /pages/

// This file defines the route of `/pages/`

// Route String
export default '/product/@productId'

The parameter productId is available at pageContext.routeParams.productId.

Route Functions give us full programmatic flexibility to implement advanced routing logic, for example route guards:

// /pages/product/

// This file defines the route of `/pages/product/`

import { resolveRoute } from 'vike/routing'

export default async (pageContext) => {
  // Ensure that `/product/@id/edit` can be accessed only by admins
  if (!pageContext.user.isAdmin) {
    return false

  // We can use Vike's Route String resolver
  return resolveRoute('/product/@id/edit', pageContext.urlPathname)

See also:

React Router / Vue Router