The principle of path jump in JavaScript

huxiaoxiao. 2022-01-26 23:36:55 阅读数:907

principle path jump javascript

Front-end routing , It is a state manager with different front-end pages .

( route , Speaking white , It's page skipping , The path involved in this jump yes

         Relative paths   /login  /regPage)

Routing in the client , It's actually dom Show and hide elements .

When the page shows home When it comes to content ,about The contents of are all hidden , On the contrary, it is the same .

There are two ways to implement client routing : be based on hash And based on html5 history api.

route Yes Two different ways : Hash and History

for instance :

.main ul li{
width: 160px;
height: 26px;
line-height: 26px;
list-style: none;
float: left;
width: 500px;
height: 300px;
border: 1px solid blue;
clear: both;
<div class="main">
<h2> JD.COM </h2>
<li><a href="#/a"> Sign in </a></li>
<li><a href="#/b"> register </a></li>
<li><a href="#/c"> User center </a></li>
<div class="p"></div>
<div class="container" id="container">
home page
window.onload = function(){
// When in the window hash When the value changes , We trigger the call onhashchange()
window.onhashchange = function(){
case '#/a':
container.innerHTML = '66666';
case '#/b':
container.innerHTML = '888';
case '#/c':
container.innerHTML = '777';

When you click the button above, view the console :


  Not very familiar , Let's go back and optimize it , The general principle is like this

copyright:author[huxiaoxiao.],Please bring the original link to reprint, thank you.