前端路由机制

123456

<ul>    <li><a href="#/home">home</a></li>    <li><a href="#/about">about</a></li></ul><div id="routerView"></div>

1234567891011121314151617

var routerView=document.querySelector("#routerView");window.addEventListener("DOMContentLoaded",onchange);window.addEventListener("hashchange",onchange);function (){    switch(location.hash){        case "#/home":            routerView.innerHTML="home";            return;        case "#/about":            routerView.innerHTML="about";            return;        default:            routerView.innerHTML="";            return;           }}

123456

<ul>    <li>大专栏  前端路由机制tag"><a href="/home">home</a></li>    <li><a href="/about">about</a></li></ul><div id="routerView"></div>

12345678910111213141516171819202122232425

var routerView=document.querySelector("#routerView");window.addEventListener("popstate",onchange);    document.querySelectorAll("a[href]").forEach(    	el=> el.addEventListener("click",function(e){    	e.preventDefault();                  //阻止A标签默认行为    	var path=el.getAttribute("href");    	history.pushState(null,"",path);     //@param 1)状态对象2)标题3)URL        onchange();                          //手动触发}))function (){    switch(location.pathname){        case "/home":            routerView.innerHTML="home";            return;        case "/about":            routerView.innerHTML="about";            return;        default:            routerView.innerHTML="";            return;           }}