Navigo NPM | npm.io

Navigo

A simple dependency-free minimalistic JavaScript router

size

v.8+ documentation
v.7 documentation
Examples
Changelog
Using React? Checkout navigo-react package.
🎮 Online playground here codesandbox.io/s/navigo-example-jrui8;

Navigo

Selling points

Dependency free
~10KB minified, ~4KB gzipped
Based on History API so it does update the URL of the page
Supports hash based routing too
Simple mapping of route to a function call
Parameterized routes
Navigating between routes
Hooks (before, after, leave, already)
Not-found and default handler
Easy integration with HTML links via data-navigo HTML attribute

Installation

Drop the following into your page:

<script src="//unpkg.com/navigo"></script>

or via npm/yarn:

> npm install navigo --save
> yarn add navigo -S

Quick start

const router = new Navigo('/');

The constructor of the library accepts a single argument - the root path of your app. If you host your project at https://site.com/my/awesome/app, your root path is /my/awesome/app. Then you have to define your routes.

router.on('/products/list', function () {
  // do something
});

At the end you have to trigger the resolving logic:

router.resolve();

After that when you need a page change call the navigate method. This one changes the URL and (by default) triggers resolve.

router.navigate('/about');

Add data-navigo attribute to your page links and they'll be transformed into navigate callers.

<a href="/about/contacts" data-navigo>Contacts</a>

Checkout the online playground to see it in action.

Development

> yarn dev

Building

> yarn build

Tests

> yarn test
> yarn test-watch

MISC

A modern JavaScript router in 100 lines

router vanilla history

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago