<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <p> <ul> <li><a href="#/">Home</a></li> <li><a href="#/about">About</a></li> </ul> <p id="view"></p> </p> <script> let Home = '<h1>This is Home!</h1>'; let About = '<h1>This is About!</h1>'; let Router = function (el) { let view = document.getElementById(el); let routes = []; let load = function (route) { route && (view.innerHTML = route.template) } let redirect = function () { let url = window.location.hash.slice(1) || '/'; for (let route of routes){ url === route.url && load(route) } } this.push = function (route) { routes.push(route) } window.addEventListener('load',redirect,false); window.addEventListener('hashchange',redirect,false); } let router = new Router('view'); router.push({ url:'/', template:Home }); router.push({ url:'/about', template: About }); </script></body></html>
湘公网安备43019002002060