Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use native js code to achieve front-end simple routing", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "how to use native js code to achieve front-end simple routing" bar!

What on earth is routing?

Routing is the activity of transmitting information from a source address to a destination address through an interconnected network. Routing occurs in the third layer of the OSI network reference model, namely the network layer.

In popular terms, routing is to send a url to the back-end server and get the corresponding back-end resources.

Implement a hashRouter// html part go to 1 go to 2 go to 3 go to 4 what you are looking for is eaten by the dog / / jsconst app = document.getElementById ('app') const div1 = document.createElement (' div') div1 [XSS _ clean] = '1.components'const div2 = document.createElement (' div') div2 [XSS _ clean] = '2.components'const div3 = document.createElement (' div') div3 [XSS _ clean] = '3.components 'const div4 = document.createElement (' div') div4 [XSS _ clean] = '4.components'const routerMap = {"1": div1 "2": div2, "3": div3, "4": div4} function route (container) {/ / get route hash value let hashName = _ window.location.hash.substr (1) console.log (hashName) hashName = hashName | |'1' / / get the corresponding component const components = routerMap [hashName] if (! components) {/ / 404 components = document.querySelector ("# div404") } components.style.display = 'block' console.log (components) / / display interface container [XSS _ clean] = "; container.appendChild (components);} route (app) window.addEventListener (' hashchange', () = > {route (app);})

Here, a js version of simple routing has been completed. Without considering nesting, the basic function of routing has been completed. The main core idea is to use an api hashchange provided by hash in HTML5 to listen for changes in hash, and then render different components.

HistoryRouterconst app = document.getElementById ('app') const div1 = document.createElement (' div') div1 [XSS _ clean] = '1.components'const div2 = document.createElement (' div') div2 [XSS _ clean] = '2.components'const div3 = document.createElement (' div') div3 [XSS _ clean] = '3.components'const div4 = document.createElement (' div') div4 [XSS _ clean] = '4.components'const routerMap = {"/ 1": div1, "/ 2": div2, "/ 3": div3 "/ 4": div4} Function route (container) {/ / get the route hash value let hashName = _ window.location.pathname; if (hashName = = "/") {hashName = "/ 1";} / / get the component corresponding to the route let components = routerMap [hashName] if (! components) {/ / 404 components = document.querySelector ("# div404");} components.style.display = 'block' / / display interface container [XSS _ clean] = "" Container.appendChild (components);} const allA = document.querySelectorAll ("a.link"); for (let an of allA) {a.addEventListener ('click', () = > {e.preventDefault (); const href = a.getAttribute ("href"); window.history.pushState (null, `page ${href} `, href); / / routing change update onStateChange (href);})} route (app) function onStateChange () {route (app);}

In fact, the html part is the same here. Compared with hashRouter, the change point is that Hsitory mode cannot listen for routing changes. Components need to be updated manually when they change, and the api used becomes window.history.pushState.

MemoryRouter

In fact, memoryRouter does not have much contact with the front end, because this route pattern appears more on App, it is not suitable to appear on H6 or pc, this kind of route is suitable for invisible places.

Const app = document.getElementById ('app') const div1 = document.createElement (' div') div1 [XSS _ clean] = '1.components'const div2 = document.createElement (' div') div2 [XSS _ clean] = '2.components'const div3 = document.createElement (' div') div3 [XSS _ clean] = '3.components'const div4 = document.createElement (' div') div4 [XSS _ clean] = '4.components'const routerMap = {"/ 1": div1, "/ 2": div2, "/ 3": div3 "/ 4": div4} Function route (container) {/ / get the hash value of the route let number = window.localStorage.getItem ("pathName"); if (hashName = = "/") {hashName = "/ 1";} / / get the component corresponding to the route let components = routerMap [hashName] if (! components) {/ / 404 components = document.querySelector ("# div404");} components.style.display = 'block' / / display interface container [XSS _ clean] = "" Container.appendChild (components);} const allA = document.querySelectorAll ("a.link"); for (let an of allA) {a.addEventListener ('click', () = > {e.preventDefault (); const href = a.getAttribute ("href"); window.localStorage.setItem ("pathName", href); / / routing change update onStateChange (href);})} route (app) function onStateChange () {route (app);}

MemoryRouter has been implemented above, but it actually hides the route and gets it somewhere.

Thank you for reading, the above is the content of "how to use native js code to achieve front-end simple routing". After the study of this article, I believe you have a deeper understanding of how to use native js code to achieve front-end simple routing, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.