Why is hash mode recommended?
When creating a project, vue-router uses hash mode by default. Should you use hash mode or history mode when setting the mode?
By understanding how they work and understanding the differences, you will know when to choose which patterns.
I. Implementation principle
Hash principle
Hash Detects the change of the onHashchange event in the browser and searches for the route application. Change the page routing by changing location.hash.
Principle of history
Change the page path using the new pushState() and replaceState() methods in HTML5’s History Interface.
The history Interface is provided by the browser history stack. You can use the back, forward, and Go commands to read the browser history stack. PushState and repalceState also allow you to change the browser history stack.
Hash vs. history:
| hash | history |
|---|---|
| There are no. # | No no. # |
| Compatible with IE8 | It is compatible with Internet Explorer 10 only |
| The actual URL is preceded by a hash character, which is not sent to the server and does not require any processing at the server level | Every page visited requires the server to generate HTML files for routing matching and then send the response to the browser, consuming a lot of resources of the server |
| There are no 404 problems with the refresh | A 404 problem is reported when the browser accesses nested routines directly. |
| No server configuration is required | A callback route needs to be configured on the server |
2. Why is the Hash mode recommended?
Reason:
1. From the perspective of compatibility.
Hash is compatible with IE8, while History is compatible with IE10.
2, from the perspective of network request analysis.
In hash mode, addresses are changed using the hashchange event, which reads only the hash symbol and does not initiate any network requests.
In history mode, each page is visited and a network request is initiated. Each request requires the server to conduct routing matching, query database, generate HTML documents and then send the response to the browser. This process will consume a lot of resources of the server and put great pressure on the server.
3. Analysis of server configuration.
Hash does not require any server configuration.
When history attempts to refresh the page, the page corresponding to the URL cannot be found, causing a 404 problem. Because the route behind the domain name is controlled by the front end, the back end can only retain the domain name part, so it will cause the problem of page loss, the server need to add a back route, can solve the problem.
Insufficient Hash mode
# in Hash mode, also known as anchor points, is the same as # in CSS, so page positioning is invalid in hash mode.
2. Hash is bad for SEO.
3, white screen time problem. The browser needs to wait for the JavaScript file to finish loading and then render the HTML document content. Users wait a little longer.
Well xiaobian today’s article is over, like me can point a concern oh