chellimiller/baby-router.html

## baby-router.html
<!doctype html>
<html>
<title></title>
<meta charset="utf-8">
<style>
page {
	display: none;
}
</style>
<body onload="inform()">

<header>

<button onclick="routerRedirect('test')">Test</button>
<a href="#/foo">End</a>
</header>

<main id="outlet"></main>

<page id="example">Example</page>
<page id="bar">Foobar</page>

</body>
<script>
function routerRedirect(url) {
	window.location.hash = "/" + url;
}

function updateRouterOutlet(url) {
	let page = document.getElementById(getRoute(url));
	document.getElementById("outlet").innerHTML  = page.innerHTML;
}

window.onhashchange = () => {
	updateRouterOutlet(location.hash)
};

function getRoute(url) {
	if (url.startsWith('#')) {
		url = url.substring(1);
	}
	if (url.startsWith('/')) {
		url = url.substring(1);
	}
	return routes[url];
}

var routes = {
 'test': 'example',
 'foo': 'bar',
}

function inform() {
	console.log('BODY RELOAD');
}
</script>
</html>
	<!doctype html>
	<html>
	<title></title>
	<meta charset="utf-8">
	<style>
	page {
	display: none;
	}
	</style>
	<body onload="inform()">

	<header>

	<button onclick="routerRedirect('test')">Test</button>
	<a href="#/foo">End</a>
	</header>

	<main id="outlet"></main>

	<page id="example">Example</page>
	<page id="bar">Foobar</page>

	</body>
	<script>
	function routerRedirect(url) {
	window.location.hash = "/" + url;
	}

	function updateRouterOutlet(url) {
	let page = document.getElementById(getRoute(url));
	document.getElementById("outlet").innerHTML = page.innerHTML;
	}

	window.onhashchange = () => {
	updateRouterOutlet(location.hash)
	};

	function getRoute(url) {
	if (url.startsWith('#')) {
	url = url.substring(1);
	}
	if (url.startsWith('/')) {
	url = url.substring(1);
	}
	return routes[url];
	}

	var routes = {
	'test': 'example',
	'foo': 'bar',
	}

	function inform() {
	console.log('BODY RELOAD');
	}
	</script>
	</html>