1. Front-end routing

There are two front-end routing modes: Hash mode and history mode. The implementation modes, advantages and disadvantages of these two modes will be analyzed next.

Global installation first:

Yarn Global add light-server // or NPM -g install light-serverCopy the code

Hash vs. History:

Hash mode (vue-router default)

Hash mode is a mode in which the path of the front-end route is concatenated with # after the actual URL. When the path after # changes, the browser does not re-initiate the request, but instead fires a Hashchange event.

The sample

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, Initial scale = 1.0 "/ > < title > Document < / title > < / head > < body > < a href =" # / a > "a page < / a > < a href =" # / b > b page < / a > < div id="app"></div> </body> </html> <script> function render() { const app = document.querySelector("#app"); app.innerHTML = window.location.hash; } // element.addEventListener(event, function, useCapture); // The first argument is the event type (such as "click" or "mousedown"). // The second argument is the function we want to call when the event occurs. // The third argument is a Boolean value that specifies whether to use event bubbling or event capturing. This parameter is optional. window.addEventListener("hashchange", render); </script>Copy the code

In the example above, we use the A tag to set up two route navigations, using the app as the view rendering container, and triggering the view container update when switching routes. This is actually how most front-end framework hash routing is implemented.

2. Advantages and disadvantages of hash mode

advantages

  • Only the front end needs to configure the routing table, but the back end does not need to participate
  • Good compatibility, browser can support
  • Changes in the hash value do not send requests to the back end, but belong to front-end routes

disadvantages

  • The hash value must be preceded by a #, which is not in accordance with the URL specification and is not beautiful

3. The history mode

The History API is a new feature in H5 that allows developers to directly change the front-end routing by updating the browser URL address without re-initiating the request (replacing the URL and not refreshing the page).

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>history</title>
  </head>
  <body>
    <a href="javascript:toA();">A page</a>
    <a href="javascript:toB();">B page</a>
    <div id="app"></div>
    <script>
      function render() {
        console.log("render");
        app.innerHTML = window.location.pathname;
      }
      function toA() {
        history.pushState({}, null."/a");
        render();
      }
      function toB() {
        history.pushState({}, null."/b");
        render();
      }
      window.addEventListener("popstate", render);
    </script>
  </body>
</html>

Copy the code

The History API provides a wealth of functions for developers to call, so open the console and type the following statement to watch the browser address bar change:

History. replaceState({}, null, '/b') // Replace route history.pushState({}, null, Back () // Returns history.forward() // forward history.go(-2) // Back 2 timesCopy the code

The above code listens for the popState event, which can listen for:

  • The user clicks the browser’s forward and back actions
  • Manually call the back, forward, and go methods of history

Can’t listen

This is why the toA and toB functions above require manual calls to the Render methods internally. The historyindex ‘/history.html’ parameter is used by the light-server.

When the browser refreshes, it sends the actual resource request along a path. If the path is a URL set by the front end through the History API, then the resource does not exist on the server and 404 is returned. The above argument means that the content of history.html is returned if the backend resource does not exist. (Tried no reaction, know there is this use can be)

Therefore, when deploying a single page application based on the History API online, it must be supported by the back end, otherwise there will be a lot of 404. In the case of the most common Nginx, simply add the following line to the configured location / :

Try_files $uri /index.html 1 History

Advantages:

Conform to url address specification, do not need #, use more beautiful

Disadvantages:

  • It is not as compatible with hash and requires server support for redirection, otherwise the page will be 404 when refreshed
  • Poor compatibility takes advantage of the new pushState() and replaceState() methods in the HTML5 History object and requires browser-specific support.

4. The traditional route is different from the front-end route

Traditional routing means that when a user accesses a URL, the corresponding server receives the request and then resolves the path in the URL to perform the corresponding processing logic. This completes a route distribution.