Adding
<script src="js/router-v1.min.js"></script>
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.
<script src="js/router-v1.min.js"></script>
let page = document.body; let app = router('#!/home'); app.route('#!/home',()=>{ page.innerText = 'route: about'; }); app.route('#!/about',()=>{ page.innerText = 'route: about'; });
let page = document.body; let app = router('#!/home'); app.routing({ '#!/home': ()=>{ page.innerText = 'route: home'; }, '#!/about': ()=>{ page.innerText = 'route: user/'+params.user; } });
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}`; }, });
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}`; }, });