navigo
    TypeScript icon, indicating that this package has built-in type declarations

    8.11.1 • Public • Published

    Navigo

    A simple dependency-free minimalistic JavaScript router

    npm downloads size

    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

    Install

    npm i navigo

    DownloadsWeekly Downloads

    25,028

    Version

    8.11.1

    License

    MIT

    Unpacked Size

    448 kB

    Total Files

    40

    Last publish

    Collaborators

    • krasimir