@barba/router

Barba router allows you to use custom routes for page transitions.

Definition

This module adds a route rule to Barba, that is less important than custom() but more than namespace. You can check the core transition rules for details.

Syntax

barba.use(router, <options>)

Option Type Default Description
routes Array [] Array of <Route>

<route> object

Property Type Description
name String Value to be used with transitions
path String URL pattern

path supports dynamic segments /product/:id and regular expressions /:lang(fr|en)/:post
See the path-to-regexp for detailed documentation.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import barba from '@barba/core';
import barbaRouter from '@barba/router';

// define your routes
const routes = [{
path: '/index',
name: 'home'
}, {
path: '/product/:id',
name: 'item'
}];

// tell Barba to use the router with your custom routes
barba.use(barbaRouter, {
routes,
});

// init Barba
barba.init();
Css Prefetch