This is the 8th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Preface 🎹

As we all know, hash and history are common questions in front interviews. Before you read this article, Monday’s knowledge of hash and history might have included a # in the hash URL, but history would not. Then, another thing I know is that only history can be separated from the front and back ends, while hash has nothing to do with the front and back ends. However, the reality is that…

For front-end routing, both hash and History can be used to separate projects from the front and back ends, and they have their own characteristics and usage scenarios. In the use process, it is important to understand the scenario in which the current project is in, so as to better determine which routing mode is better to use. Enter the explanation of this article ~😜

🎸 I. Front-end routing principle

1, SPA

SPA, or Single Page Application. A single-page Web application is an application that has only one Web page. A single-page application (SPA) is a Web application that loads a single HTML page and dynamically updates that page as the user interacts with the application. The browser starts by loading the necessary HTML, CSS, and JavaScript, and everything is done on this page, all controlled by JavaScript.

In order to keep pace with the rapid development of single-page Web applications, various front-end componentization technology stacks are emerging one after another. In recent years, through continuous version iteration, vUE and React two technology stacks stand out and become the two most popular technology stacks at present.

2. When do you need routing

For modern development projects, a slightly more complex SPA requires routing. Vue-router is the standard configuration of vUE. The VUe-router has two modes: Hash and History.

The following is based on these two models to explain one by one.

🎷 Hash mode

1, define,

The hash pattern is a pattern that concatenates the path of the front-end route with a hash sign (#) after the real URL. Instead of reissuing the request when the path after the hash sign # changes, the browser fires the onHashChange event.

2, web url components

(1) Understand several URL properties

attribute meaning
location.protocal agreement
location.hostname The host name
location.host The host
location.port The port number
location.patchname To access the page
location.search Search content
location.hash Hash value

(2) Demonstration

Here’s a url to illustrate the above attributes:

/ / http://127.0.0.1:8001/01-hash.html? a=100&b=20#/aaa/bbb
location.protocal // 'http:'
localtion.hostname / / '127.0.0.1'
location.host / / '127.0.0.1:8001'
location.port / / 8001
location.pathname //'01-hash.html'
location.serach / / '? a=100&b=20'
location.hash // '#/aaa/bbb'
Copy the code

3. Features of hash

  • Hash changes trigger web page hops, which are forwards and backwards in the browser.

  • The hash changes the URL, but does not trigger a page reload (the hash changes are recorded in window.history), that is, the page does not refresh. That is, all page hops are performed on the client side. Therefore, this is not an HTTP request, so this pattern is not conducive to SEO optimization. The hash can only change the part after the #, so it can only jump to the URL of the same document as the current URL.

  • The hash listens for the change of the hash by means of window.onHashChange, so as to realize the function of no refresh jump.

  • The hash is never committed to the server.

🎺 iii. History mode

1, define,

The History API is a new feature in H5 that allows developers to change front-end routing directly, that is, to update the browser URL address without reissuing the request.

2. Difference from hash

Let’s use an example to demonstrate the difference between hash and History when refreshed in the browser. The details are as follows:

Normal page viewing

Refresh the page refresh the page https://github.com/xxx/yyy/zzz https://github.com/xxx/yyy https://github.com/xxx to refresh the pageCopy the code

Alter H5 History mode

Refresh the page https://github.com/xxx https://github.com/xxx/yyy front jump, don't refresh the page https://github.com/xxx/yyy/zzz front jump, don't refresh the pageCopy the code

API for History

Here’s a look at some of the new HTML5 History apis. The details are as follows:

API define
history.pushState(data, title [, url]) PushState is mainly usedAdds a record to the top of the history stack. The analysis of each parameter is as follows:(1) dataThis is passed as an argument when the onPopState event is triggered.(2) the titleIs the page title and is ignored by all current browsers. 3.urlIs the address of the page, optional, if missing, is the address of the current page
history.replaceState(data, title [, url]) Change the current history with the same parameter as above; The pushState above is adding this change
history.state Different browsers have different read and write permissions for the data stored in the preceding methods
window.onpopstate In response to a call of pushState or replaceState

4, The characteristics of history

For history, there are mainly the following characteristics:

  • The newurlCan be with the currenturlAny of the same originurl, can also be with the currenturlSame address, but one of the problems that this can cause is that it willRepeat this operationRecord it on the stack.
  • throughhistory.stateTo add any type of data to a record.
  • You can set extratitleProperty for later use.
  • throughpushState 、 replaceStateTo achieve the function of no refresh jump.

5. There are problems

History does solve some of the hashing problems, but it also introduces new problems. The details are as follows:

  • usehistoryMode, when the current page is refreshed, the browser reinitiates the request at this point. ifnginxNo match to get the currenturl, will appear404The page.
  • And forhashIn terms of patterns, it looks like it’s changedurlBut will not be included inhttpIn the request. Therefore, it is used to guide the browser’s actions and does not affect the server side. So changehashIt hasn’t really changedurl, so the page path is the same as before,nginxThey wouldn’t intercept.
  • Therefore, in usehistoryMode is requiredAllow addresses to be accessible through the serverIf not set, it can easily lead to404In the situation.

6. Choose both

Let’s look at how to choose between the two in a real project. The details are as follows:

  • to BIs recommendedhashIs relatively simple and easy to use, and becausehash 对 urlSpecification insensitive;
  • to COf the system that can be consideredH5 history, but need to beServer side support;
  • If you can use the simple first, don’t use the complex, consider the costs and benefits.

🎻 4. Conclusion

When it comes to hash and history, it’s important to know the difference between the two and how they can be used, as well as the advantages and disadvantages of each. The above article is just a brief introduction to the principle of front-end routing, I hope to help you ~

The other bottom of the third egg put an article about the implementation of Vue-Router, learn to have the ability of small partners need to take!

🐣 Easter Eggs One More Thing

🏷️ Resources

Jarvis 👉 In the routing of the SPA project, note the difference between hash and history

Vue-router official document 👉 Two modes of vue-router

It’s worth a look at 👉 from using to implementing your own simple Vue Router to see this on the line

🏷 ️ set pieces

  • Follow the public account Monday research, the first time to pay attention to quality articles, more selected columns for you to unlock ~
  • If this article is useful to you, make sure you leave footprints before you go
  • That’s all for this article! See you next time! 👋 👋 👋