feat: add history router

hans000 · hans000 · commit 30986ceef950 · 2022-10-19T17:30:04.000+08:00
diff --git a/packages/test-vanilla/src/history-router/index.html b/packages/test-vanilla/src/history-router/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div>
+        <button onclick="router.navigate('/')">home</button>
+        <button onclick="router.navigate('/app')">app</button>
+    </div>
+    <div id="root"></div>
+</body>
+<script src="./router.js"></script>
+<script>
+    const router = new Router()
+    router.add('/', () => {
+        return `<p>home</p>`
+    })
+    router.add('/app', () => {
+        return `<p>app</p>`
+    })
+    router.listen((html) => {
+        const root = document.querySelector('#root')
+        root.innerHTML = html
+    })
+</script>
+</html>
diff --git a/packages/test-vanilla/src/history-router/readme.md b/packages/test-vanilla/src/history-router/readme.md
@@ -0,0 +1,10 @@
+# history router
+
+相关的api
+- history.forward
+- history.back
+- history.go(n)
+- history.pushState(data, title, url)
+- history.replaceState(data, title, url)
+- history.state
+- popstate
diff --git a/packages/test-vanilla/src/history-router/router.js b/packages/test-vanilla/src/history-router/router.js
@@ -0,0 +1,36 @@
+class Router {
+    routers = []
+    add(path, render) {
+        this.routers.push({
+            path,
+            render,
+        })
+    }
+    listen(callback) {
+        this.callback = callback
+        window.addEventListener('popstate', () => {
+            this.handle()
+        })
+        this.handle()
+    }
+    handle() {
+        const path = (location.pathname || '/')
+        for (const router of this.routers) {
+            if (router.path === path) {
+                this.callback(router.render())
+                return 
+            }
+        }
+    }
+    navigate(path, options = {
+        state: undefined,
+        replace: false
+    }) {
+        if (options.replace) {
+            history.replaceState(options.state, '', path)
+        } else {
+            history.pushState(options.state, '', path)
+        }
+        this.handle()
+    }
+}
