Navigo
A simple dependency-free minimalistic JavaScript router
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 () {
});
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