https://github.com/mvneerven/vanillarouter

A fully functional Vanilla ES6 hash and history based router for any SPA/PWA.
https://github.com/mvneerven/vanillarouter

es6 es6-javascript es6-modules pwa-apps single-page-app vanilla-javascript vanilla-js

Last synced: 3 months ago
JSON representation

A fully functional Vanilla ES6 hash and history based router for any SPA/PWA.

• Host: GitHub
• URL: https://github.com/mvneerven/vanillarouter
• Owner: mvneerven
• Created: 2021-11-11T17:06:10.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2021-12-08T17:33:48.000Z (about 3 years ago)
• Last Synced: 2023-02-28T01:28:36.048Z (almost 2 years ago)
• Topics: es6, es6-javascript, es6-modules, pwa-apps, single-page-app, vanilla-javascript, vanilla-js
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 28
• Watchers: 3
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vanillarouter

One of the first reasons people select a JavaScript framework for SPAs/PWAs is the fact that JavaScript doesn't have a built-in router.

JavaScript does however include all it takes to create an efficient and easy to use routing mechanism. 

This one is pure, Vanilla ES6. A fully functional *hash* and *history* router for any SPA/PWA.

## Features

- History-based routing (```pushState```/```popState```)

- Hash-based routing (```hashchange```)

- Native JS Events

- Complete decoupling of any component architecture: you decide what to do with the ```route``` event

- Extremely tiny footprint.

## Installation

None

## Demo

See a working [demo](https://vanillaroute.z6.web.core.windows.net/), hosted as a Serverless Static Website on Azure Blob Storage. 

## Usage

```js

const router = new VanillaRouter({

    type: "history",

    routes: {

        "/": "home",

        "/about": "about",

        "/products": "products"

    }

}).listen().on("route", e => {

    

    // console.log(e.detail.route, e.detail.url);

})

```