This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

👉 for, rather than retreat webs. Book of the Han: Biography of Dong Zhongshu

preface

In the early days, when the front and back ends were not separated, routes were controlled by the server.

The client -> HTTP request -> server -> returns different HTML/data depending on the URL path

The disadvantages and advantages of this approach are obvious

Advantages: SEO effect is good, users will see the first screen time is very small

Cons: Server stress, code fusion is hard to maintain, collaboration flow is unclear

With the popularity of Ajax, asynchronous data requests can be made without a browser refresh. There is a more advanced experience – single-page apps. In a single page application, not only are interactions within the page non-refreshed, but also page jumps are non-refreshed. The feature that supports single page application is front-end routing.

Front-end routing features

What are the requirements for front-end routing?

1. Render different content according to different URLS

2. Do not refresh the page

That is, you can change the URL under the premise of the page does not refresh.

Hash principle and implementation

Hash addresses this need with the following features:

  1. The hash value in the URL is only a state on the client/browser side. The hash value is not carried when the client sends a request to the server.

  2. Changing the hash value does not cause a page refresh

  3. Changes to the hash value add to the browser’s access history, so you can use the browser’s back and forward buttons to control hash switching

  4. Changing the hash value triggers a Hashchange event such as www.baidu.com/#/hash1, and changing the content after # does not cause a page refresh, but triggers a Hashchange event.

We also have two ways to control hash changes:

  1. Using the A tag, set the href property. When the user clicks on the A tag, the hash in the Url changes to the href value. For example, click Change Hash

  2. Through the js

location.hash = '#hash-change'
Copy the code

History principle and implementation

Hash solves the problem, but it’s ugly with #.

The wheel of history passed Hash inexorably, and in the HTML5 era, the History API was introduced.

  • window.history.back(); / / back

  • window.history.forward(); / / to go forward

  • window.history.go(-3); // Back up three pages

  • window.history.pushState(null, null, path);

  • window.history.replaceState(null, null, path);

The two main apis are pushState and replaceState;

Both apis allow you to manipulate browser history without refreshing the page.

Unlike pushState, which adds history, replaceState replaces the current history directly.

The History Api has the following features:

  1. History.pushstate () or history.replacEstate () will not trigger the popState event, so we need to trigger the page rendering manually;

  2. You can use the PopState event to listen for URL changes

  3. Popstate is triggered only when the user clicks the browser’s back and forward buttons or invokes the back, Forward, or Go methods with JavaScript.

Their parameters are the same, the three parameters are:

  1. State: a state object associated with the specified url that is passed in a callback function when the POPState event is triggered. If this object is not needed, null can be used here.

  2. Title: The title of the new page, but all browsers currently ignore this value, so null can be filled here.

  3. Url: The new url must be in the same domain as the current page. The browser’s address bar will display the url.