The router
What is a route
knowledge
Example 1 returns the main portion of a URL. Assume that the current URL is http://www.runoob.com/test.htm#PART2: document. Write (location. The hash); Example output: #part2Copy the codeGet the document element with id="demo" : document.querySelector("#demo");Copy the codeThe addEventListener() method is used to add an event handle to the specified element. Add a custom event listener like the standard JS event listener, which can be added directly through the window object as follows: Window.addeventlistener ('customEvent',function(event){// The parameters passed in from event.detail can be obtained.... });Copy the codeIn actual combat
index.html
<html> <head> <meta charset="UTF-8" /> </head> <body> <a href="#1">go to 1<a/> <a href="#2">go to 2<a/> <a href="#3">go to 3<a/> <a href="#4">go to 4<a/> <div id="app"></div> <div id="div1" style="display:none;" > 1 </div> <div id="div2" style="display:none;" > 2 </div> <div id="div3" style="display:none;" > 3 </div> <div id="div4" style="display:none;" > 4 </div> <div id="div404" style="display:none;" </div> <script SRC =" SRC /index.js"></script> </body> </ HTML >Copy the codeindex.js
/ / get the user want to go where the let number = window. The location. The hash, substr (1); Let div= docuemnt.querySelector(' #div${number} '); let app =document.querySelector("#app"); // Render interface if(div) {div.style.display ="block"; } else{ div =document.querySelector('#div404') div.style.display ="block"; } // Display interface id(app) app.appendChild(div); Window.addeventlistener ("hashchange", ()=>{console.log("hash changed "); const number2 =window.location.hash.substr(1); Let div2= docuemnt.querySelector(' #div${number} '); if(div2){ div2.style.display ="block"; }else{ div = document.querySelector("#div404") } const app2 =document.querySelector("#app"); Div2.style. display ="block"; Chilren [0]. Style. Display ="none"; document.body.appendChild(app2,children[0]); app2.appendChild(div2); });Copy the codeIndex. Js optimization of 1.0
const div1 =document.createElement('div') div1.innerHTML = '1' const div2 =document.createElement('div') div1.innerHTML = '2' const div3 =document.createElement('div') div1.innerHTML = '3' const div4 =document.createElement('div') div1.innerHTML = '4' const routeTable ={ '1' :div1, '2' :div2, '3' :div3, '4' :div4 } function route(){ let number =window.location.hash.substr(1); let app =document.querySelector("#app"); number =number || 1; let div= routeTable[number.toString()]; // Render interface let div =routleTable[number.toString()]; if(! div) { div =document.querySelector('#div404') } div.style.display ="block"; // display the interface app.innerhtnl = "" app2.appendChild(div); } } route(); Window.addeventlistener ("hashchange", ()=>{console.log("hash changed "); route(); });Copy the codeIndex. Js optimization of 2.0
function route(){ let number =window.location.hash.substr(1); let app =document.querySelector("#app"); number =number || 1; let div= docuemnt.querySelector(`#div${number}`); // Render interface if(! div) { div =document.querySelector('#div404') } div.style.display ="block"; If (app.children. Length >0){app2.chilren[0].style. Display ="none"; document.body.appendChild(app2,children[0]); app2.appendChild(div); } } route(); Window.addeventlistener ("hashchange", ()=>{console.log("hash changed "); route(); });Copy the codeHash pattern? The history model? The memory model
Hash mode: front-end routing can be performed in any case features: Although the hash is displayed in the URL, requests are not sent to the server. Disadvantages: Not SEO friendly, the server cannot receive the hash
History mode: The backend renders all front-end routes on the same page. Disadvantages :IE8 does not support this mode
Memory mode: Single machine, no URL