Train of thought

  • Why front-end routing
  • What problem does front-end routing solve
  • What is the implementation principle of front-end routing

Traditional page

The whole project is DOM straight out of the page, “traditional page” (SSR is the first screen straight out, I don’t think traditional page category here). So what is DOM straight out? To put it simply, the browser initiates a request after entering the url, and the returned HTML page is the final rendering effect, that is, DOM straight out. And every time you click to jump to the page, the HTML resource will be requested again.

Each time the page is loaded, it will return HTML resources and static resources such as CSS inside, combined into a new page.

Single page

React, Vue, Angular and other famous single-page application frameworks. One thing these frameworks have in common is “rendering pages through JS”. With these single-page frameworks, the HTML page basically has a single DOM entry

Since a single page is rendered this way, what if I have a dozen pages to jump to and from each other!! ?? At this time, front-end routing emerged as The Times require, it is to solve the single-page website, by switching the browser address path, to match the corresponding page components. Let’s look at a picture to understand this process

The front-end route matches the corresponding page component based on the pathname change in the browser address bar. It is then inserted into the root node

by creating a DOM node. This has the effect of no refresh page switching, which is why modern frameworks like React, Vue, and Angular create page components that have their own life cycle.


The hashchange is a native listener event that can listen for the following changes:

  • Click on the aTAB to change the browser address
  • The browser’s forward and backward behavior
  • throughwindow.locationMethod to change the browser address

2. Historical mode

History mode is a bit more troublesome than hash mode because history mode relies on the native event popState. Here’s what MDN explains:

Note that a call to history.pushState() or history.replacEstate () does not trigger the popState event, but only when a browser action is taken. If the user clicks the browser’s back button (or calls the history.back() or history.forward() methods in Javascript code.

Fact: pushState and replaceState are new HTML5 apis that are powerful enough to change the browser address without refreshing the page. This is an important way to change the address bar without refreshing the page.

Click events that include a tags are also not listened for by PopState. We need to figure out a way around this to implement the History pattern.

Solution: We can block the default event of the a tag by traversing all the a tags on the page, and then add the click event callback to get the href value of the A tag, and pushState to change the browser’s location. Pathname attribute. Then manually execute the popState event callback function to match the appropriate route

Why do YOU need front-end routing?

The traditional front end is a URL for a page, so there is no problem. With the development of SPA (single-page application), component changes and updates no longer correspond to URL changes. But we need this correspondence (for example, direct access to a SPA application’s subview via a URL), and we need a tool to maintain the correspondence between component state and page URL. This is where front-end routing comes in. Such as the react router and vue router.

Solve a problem:

It appears mainly to solve the single-page website, by switching the browser address URL path, to match the corresponding page component. Usage scenario: In single-page applications, most of the page structure is unchanged but only some content is changed.

Advantages and disadvantages of front-end routing

  • Advantages: Good user experience. After a page is initialized, only the page content needs to be changed according to the route, without sending requests to the server. The content is quickly changed, and the front and back ends are separated.
  • Disadvantages: Resending requests using the browser’s forward and back keys does not make proper use of caching. A single page can’t remember the previous scrolling position, and it can’t remember the scrolling position when moving forward or backward.

How does it work?

1, hash mode #hash

This module focuses on the location.hash value and can listen for URL changes via the event hashchange to jump to the corresponding child page.

2. Historical mode

This model focuses on. The value of location. pathName, which can listen for urls with the event popState, but it has many limitations, The popState event is triggered only when a browser action such as the user clicks on the back button or when history.back()/history.forward() is called in JavaScript. PushState, replaceState(HTML5’s heart API changes the address bar without causing page changes) a tag click event

Iterate through all the a tags in the DOM, listen for click events, manually pushState to change the browser address, and manually call the popState callback function.