@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, see 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
20
21
22
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