@barba/router

NPM version
Dependencies

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

How it works?

This module adds a route rule to Barba, that is less important than custom() but more than namespace. Take a look at the transition rules for priority order and details.

Start to define your routes, then tell Barba to use the plugin before the init() step:

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 myRoutes = [{
path: '/index',
name: 'home'
}, {
path: '/product/:id',
name: 'item'
}];

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

// init Barba
barba.init();

Options

routes

Barba router plugin routes property accepts an array of Route objects.

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.