In the front-end routing, we mainly use the History API or change the hash value to prevent the page from being reloaded, and then monitor the changes of the routing to trigger the corresponding time to load the corresponding resources to redraw the page.

Routing patterns

  • Hash routing mode
  • History Routing Mode

Hash routing mode

Implemented based on the onHashchange event and location.hash, hash is the part marked with the # symbol, and although its value is displayed on the URL, it is not included in the HTTP request, so it does not affect the back end and therefore does not cause the page to reload.

History Routing Mode

Use the location.history apis history.replacEstate () and history.pushState to switch routes without causing the page to reload. However, the parameters carried by the history routing mode are carried in the HTTP request as the page is refreshed, causing the page to be refreshed and thus the page to be lost

History mode requires background configuration support, the simplest of which isto configure the try_files directive through nginx.

location / {
  try_files $uri $uri/ /index.html;
}
Copy the code

Routing is used to set the access path and map the path to the corresponding component. When users access the corresponding path, routing realizes the switch between different components according to the mapping relationship. The whole process is realized on the same page, and does not involve the jump between pages, which is often referred to as single-page application