current position:Home>The principle of path jump in JavaScript

The principle of path jump in JavaScript

2022-01-26 23:36:55 huxiaoxiao.

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 notice
author[huxiaoxiao.],Please bring the original link to reprint, thank you.

Random recommended