Scenarios in the project

A previous VUE project switched to the history mode, and found a page with 404 after deployment. After some research, it was found that there was a relationship between the resource path configured by Nginx, but there was no such problem when using hash mode, so simply record the difference and relationship between the two modes to avoid further pit.

Two modes

The official website explains the front-end routing

That’s the core of front-end routing — changing the view without making a request to the back end.

  1. The hash mode updates the page URL by changing the anchor (#) and does not trigger a page reload. We can use window.onhashchange to listen for hash changes and handle routing.
  2. History mode is a refreshing jump to a page by calling a series of methods on the window.history object.

Respective characteristics

hash

Hash, originally used to control the position of a page window with anchor points, has the following features:

  • You can change the URL, but it does not trigger a page reload (the hash change is logged in window.hisotry) and therefore is not an HTTP request, so this pattern is not conducive to SEO optimization
  • You can only change the part after #, so you can only jump to the URL of the same document as the current URL
  • Urls can only be changed by strings
  • Use window.onhashchange to listen for changes to the hash to implement a refresh free jump.

history

According to the Mozilla Develop Network, calling history.pushState() has the following advantages over modifying hash directly

  • The new URL can be any URL of the same origin as the current URL, or it can be the same as the current URL, but this will record a repeat operation on the stack
  • The stateObject parameter allows you to add any type of data to a record
  • Additional title attribute can be set for subsequent use
  • The pushState and replaceState commands enable this function.

There is a problem

That is the scenario mentioned at the beginning of the article. When the application redirects to a page through vue-Router, the front-end route controls the page redirects. Although the URL changes, the page content changes without a new request, so there is no problem in this process. However, if you refresh the current page, the request will be re-initiated, and if nginx does not match the current URL, a 404 page will appear. So why doesn’t this happen with hash mode? As mentioned above, hashes, while they can change urls, are not included in HTTP requests. It is used to direct browser action and does not affect the server, so changing the hash does not change the URL, so the page path is the same as before and nginx does not intercept it. Therefore, remember that when using history mode, the server must allow the address to be accessible, otherwise there will be an embarrassing 404 scenario.

conclusion

  1. In hash mode, all page hops are performed by the client, making it more flexible for page interception. However, each URL change is not an HTTP request, so it is not conducive to SEO optimization.
  2. In history mode, history.pushState is used to realize the page without refreshing. This changes the URL. If you refresh the page, a new HTTP request will be made to the server again. This also makes it necessary to configure the address on the server, otherwise the server will return 404