Routing

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/about/+Page.js            /about
pages/faq/+Page.js              /faq
 
# index/ is mapped to the empty string
pages/index/+Page.js            /
 
# Parameterized route
pages/movie/@id/+Page.js        /movie/1, /movie/2, /movie/3, ...

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

// /pages/product/+route.js
 
// This file defines the route of `/pages/product/+Page.js`
 
// 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/edit/+route.js
 
// This file defines the route of `/pages/product/edit/+Page.js`
 
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)
}

React Router / Vue Router

See:

✍ Edit this page