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
- Installation
- Quick start
- Development
- Building
- Tests
- MISC

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:

``html

`

or via npm/yarn:

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

Quick start

`js
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.

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

At the end you have to trigger the resolving logic:

`js
router.resolve();
`

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

`js
router.navigate('/about');
`

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

`html
Contacts
`

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