Get started with navigo CDN

MIT licensed

Navigo: Lightweight JS library for client-side URL routing, no hash or history push.

Tags:
  • router
  • vanilla
  • hash
  • history

Stable version

Copied!

How to start using navigo CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with navigo CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/navigo/8.11.1/navigo.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const router = new Navigo('/', { links: { home: '/', about: '/about' } });

      router
        .on('/', () => {
          document.querySelector('#content').innerHTML = '<h1>Home</h1>';
        })
        .on('/about', () => {
          document.querySelector('#content').innerHTML = '<h1>About</h1>';
        });

      router.resolve();

      window.history.pushState(null, null, '/');

      const link = document.querySelector('a[href="/about"]');
      link.addEventListener('click', (e) => {
        e.preventDefault();
        router.navigate('/about');
      });
    });
  </script>
  <style>
    #content {
      width: 100%;
    }
  </style>
</head>
<body>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
  <div id="content"></div>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions