Selection of history routing and hash routing in front-end development

1. Why is there a front-end routing:

For progressive front-end development frameworks such as Vue, in order to build a SPA (single page application), a front-end routing system needs to be introduced, which is the meaning of Vue-Router. The core of the front-end routing lies in - changing the view without making a request to the back-end.

Advantages:
good user experience, more convenient user operation,
complete front-end componentization

Disadvantages:
Load a lot of resources for the first time --> Solution: Load
on demand Not friendly to SEO --> Solution: Server-side rendering nuxt
Features: When there are different requests, different components are rendered on the same page
Principle: Front and back ends are separated ( Back-end focus on data, front-end focus on interaction and visualization) + front-end routing

2. The browser currently provides two routes:

• hash —— The # symbol in the URL of the address bar (this hash is not a hash operation in cryptography). For example, this
  URL: http://www.abc.com/#/hello, the value of hash is #/hello. Its characteristic is that although the hash appears in the URL
  , it will not be included in the HTTP request and has no impact on the backend. Therefore, changing the hash will not reload the page.

Hash 路由（也就是锚点#），本质是是改变location的hash属性
利用 URL 上的 hash，当 hash 改变不会引起页面刷新，可以触发相应的 hashchange 回调函数配置路由（VueRouter会自动监听）

 window.onhashchange = function() {
    
    
   //更新页面内容
   document.getElementById("demo").innerHTML = x  
   ......
}

• history-Utilizes the new pushState() and
  replaceState() methods in the HTML5 History Interface . (Requires specific browser support) These two methods are applied to the browser's history stack.
  Based on the currently existing back, forward, and go, they provide the function to modify the history. It's just that when they perform the modification, although the current
  URL is changed , the browser will not immediately send a request to the backend.

本质是通过h5新增的history.pushState({
    
    },'','/home')或history.replaceState({
    
    },'','/home')改变路径

pushState()、replaceState() 方法接收三个参数：stateObj、title、url

history.pushState({
    
    color: "red"}, "red", "red") //设置状态
window.onpopstate = function(event) {
    
     //监听状态
  if(event.state && event.state.color === "red") {
    
    
    document.body.style.color = "red"  //更新页面内容
  }
}

Therefore, it can be said that both hash mode and history mode belong to the characteristics of the browser itself, and Vue-Router only uses these two characteristics (by calling the interface provided by the browser) to implement front-end routing.

3. Usage scenarios

In general scenarios, both hash and history can be used, unless you care more about the appearance, the # symbol mixed in the URL does not look pretty.
If you don't want a very ugly hash, we can use the routing history mode, which makes full use of the history.pushState API to complete the
URL jump without reloading the page. —— Vue-router official website.
In addition, according to the introduction of Mozilla Develop Network, calling history.pushState() has the following advantages over directly modifying the hash:

1. The new URL set by pushState() can be any URL that is the same as the current URL; and hash can only modify
   the part after # , so only the URL of the same document as the current URL can be set;
2. The new URL set by pushState() can be exactly the same as the current URL, which will also add the record to the stack; and
   the new value set by the hash must be different from the original before the action is triggered to add the record to the stack;
3. pushState() can add any type of data to the record through the stateObject parameter; while hash can only add short strings;
4. pushState() can additionally set the title attribute for subsequent use.
   Of course, history is not good in everything. Although SPA works well in the browser, when it really wants to initiate an HTTP request to the backend through a URL, the difference between the two comes. Especially when the user manually enters the URL and press Enter, or refresh (restart) the browser.

In hash mode, only the content before the hash symbol will be included in the request, such as http://www.abc.com, so for the backend, even if the routing is not fully covered, it will not return 404 error.

1. In history mode, the front-end URL must be consistent with the actual request to the back-end URL, such as
   http://www.abc.com/book/id. If the backend lacks routing processing for /book/id, a 404 error will be returned.
2. The Vue-Router
   official website describes it as follows: "However, this mode needs to be played well and requires back-end configuration support... So, you have to add a candidate resource covering all situations on the server side: if the URL does
   not match any static resources, It should return the same index.html page, which is the page your app depends on."