javascript-router

Javascript Router

A vanilla js router implementation 🔗

Demo: samuelhornsey.github.io/javascript-router/demo/

A simple Javascript UI router. Written in typescript and bundled as a es6 module for use with Webpack or Rollup.

Installation

Install using npm and webpack/rollup etc.

npm install javascript-router

Import as module.

import { Router } from 'javascript-router';

Usage

Init

const prefix = '/hello';
const router = new Router(prefix);

Add routes to the router.

router.on('/', () => {
  // Perform action on route
});

On functions can be chained.

router.on('/blog', () => {
  // Perform action on router
}).on('/posts', () => {
  // Perform action on router
});

When all routes are added call init().

router.on('/blog', () => {
  // Perform action on router
}).on('/posts', () => {
  // Perform action on router
});

router.init();

To create router links use the data-router attribute on link elements.

<a href="/blog" data-router>Link</a>

If the DOM is re-rendered or more links are added to the page the redefineLinks function must be called again.

router.redefineLinks();

Parameters and queries are passed into the .on() function.

router.on('/blog', (query, params) => {
  // Perform action on router
  console.log(query, params);
});