Router

A basic client side router that comes in a small package [1.1kb].
No Shadow Dom, No Virtual Dom... Just a simple callback function that gives you access to URL and GET parameters.

Github

Adding

<script src="js/router-v1.min.js"></script>

Basic Usage

let page = document.body;
let app = router('#!/home');
    app.route('#!/home',()=>{
        page.innerText = 'route: about';
    });
    app.route('#!/about',()=>{
        page.innerText = 'route: about';
    });

Multiple Routes

let page = document.body;
let app = router('#!/home');
    app.routing({
        '#!/home': ()=>{
            page.innerText = 'route: home';
        },
        '#!/about': ()=>{
            page.innerText = 'route: user/'+params.user;
        }
    });

Url Parameters

let page = document.body;
let app = router('#!/home');
    app.routing({
        '#!/home': ()=>{
            page.innerText = 'route: home';
        },
        '#!/books/:book': (url)=>{
            // www.website.com/#!/books/harry_potter
            // url.book -> harry_potter
            page.innerText = `route: books / ${url.book}`;
        },
    });

Get Parameters

let page = document.body;
let app = router('#!/home');
    app.routing({
        '#!/home': ()=>{
            page.innerText = 'route: home';
        },
        '#!/books/:book': (url, get)=>{
            // www.website.com/#!/books/harry_potter?test=hello_world
            // url.book -> harry_potter
            // get.test -> hello_world
            page.innerText = `route: books / ${url.book} ? ${get.test}`;
        },
    });