constant-nav/index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>route-it static top navigation</title>
    <base href="/route-it/constant-nav/">
</head>

<body>
    <script type="module">
        import { Router, ContainerRouteRenderer } from "https://unpkg.com/route-it@1.1.0/dist/index.js"

        function makeSpaLink(a, router) {
            a.addEventListener("click", ev => {
                ev.preventDefault();
                router.navigate(a.getAttribute("href"));
            });
        }

        function createTestPage() {
            let c = document.createElement("div");
            c.innerText = "Test (try back button)";
            return c;
        }

        function createTestPageFromTemplate() {
            return document.getElementById("page2template").content.cloneNode(true).children[0];
        }

        class MyApplicationRouteResolver {
            resolve(lastRoute, currentRoute, router) {
                switch (currentRoute) {
                    case "test":
                        return createTestPage();
                    case "":
                        return createTestPageFromTemplate();
                    default:
                        return false;
                }
            }
        }
        let container = document.getElementById("router-container");
        let router = new Router(new MyApplicationRouteResolver(), new ContainerRouteRenderer(container));
        router.run();
        document.querySelectorAll("nav > a").forEach(a => makeSpaLink(a, router));
    </script>

    <nav>
        <a href="" id="test-link2">home</a>
        <a href="test" id="test-link">go to test page</a>
    </nav>
    <div id="router-container"></div>

    <template id="page2template">
        <div>
            Home 🍺
        </div>
    </template>
</body>

</html>