@barba/router

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

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