Nowadays, most of them are single-page applications. Single-page applications can simulate the effects of multi-page applications thanks to their front-end routing mechanism. Front-end routing now comes in two forms:

Hash pattern

For example: xxx.xx.com/#/hash, this method can realize the refresh jump without the cooperation of the back end, mainly thanks to the haschange event, when the anchor hash changes, the haschange function will be called,

Haschange simulation implementation

(function(window) {// Exit if the browser natively supports this eventif ( "onhashchange" in window.document.body ) { return; } var location = window.location, oldURL = location.href, oldHash = location.hash; // Check if location.hash changes every 100mssetInterval(function() { var newURL = location.href, newHash = location.hash; / / ifhashChanges have been made and handlers are bound...if( newHash ! = oldHash && typeof window.onhashchange ==="function" ) {
    // execute the handler
      window.onhashchange({
        type: "hashchange", oldURL: oldURL, newURL: newURL }); oldURL = newURL; oldHash = newHash; }}, 100); })(window);Copy the code

example

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <ul>
       <li><a href="#/css">css</a></li>
       <li><a href="#/js">js</a></li>
       <li><a href="#/node">node</a></li>
   </ul>
   <div class="wrapper"> The current selection is: <span></span> </div> </body> <script> window.onhashchange =function (e) {
        console.log(e);
        document.querySelector('.wrapper span').innerText = location.hash.split('/')[1]
    }
</script>
</html>
Copy the code

H5 mode

For example, xxx.xx.com/hash requires the combination of back-end routes. HTML5’s History API adds an extension to the browser’s global History object. Typically used to solve the problem of Ajax requests not being able to return to the pre-request state through the back button

In HTML4, the window.history object was already supported to control the jump of page history. Common methods include:

  • history.forward(); // Go one step further in history
  • history.back(); // Take a step back in history
  • History. go(n): // Skip n steps in the history,n= 0 to refresh the page,n=-1 to back up one page.

In HTML5, the window.history object has been extended with new apis including:

  • history.pushState(data[,title][,url]); // Appends a record to history
  • history.replaceState(data[,title][,url]); // Replace the current page in history.
  • history.state; // is a property that gets the state information for the current page.
  • window.onpopstate; // is an event that is triggered when the browser back button is clicked or when js calls forward(), back(), go(). An event object can be passed in to the listener function. Event.state is the data argument passed in via the pushState() or replaceState() methods. Note that calls to pushState and replaceState do not trigger the onPopState event
   history.pushState({page: 1}, null, '? page=1');
    history.pushState({page: 2}, null, '? page=2'); history.back(); // Browser back window.adDeventListener ('popstate'.function(e) {// After the popState event is triggered, the event object stores the state of the current browser history. // output {page: 1}});Copy the code