routing

The concept of routing first appeared on the back end.

  • The browser makes a request
  • The server listens for a request on port 80 (or 443) and parses the URL path
  • The server returns information (.html,.php, JSON, images, etc.)
  • Browser based on the packetContent-TypeTo parse the data

This is the SSR server rendering that goes straight back to the page

The front-end routing

The essence is to detect url changes, capture URL addresses, and then parse to match routing rules.

routinghashmodel

Changes in the hash value after # in the URL will not cause the browser to make a request to the server and the page will not refresh.

  • By listeninghashchangeEvent to detect changes in the hash value
  • Detect changes in hash values and replace pages by replacing DOM

routinghistroymodel

No longer redirect urls by changing hash values, requiring backend support

  • Add a candidate resource on the server that covers all cases, and if the URL does not match any static resource, it should return the sameindex.htmlPages, which are app dependent pages
  • By listeningpopstateEvent, match route, update page DOM