Analysis of Front-end Routing

The implementation of front-end routing is actually quite simple.

Essentially, it detects url changes, intercepts URL addresses, and parses them to match routing rules.

But then someone might ask: Does the URL refresh the page every time it changes? How does JavaScript detect and intercept urls when the page is refreshed?

Prior to 2014, routing was done with hashes, and URL hashes are similar to this

https://segmentfault.com/a/1190000011956628#articleHeader2

This #. Subsequent hash changes do not cause the browser to make a request to the server, and the browser will not refresh the page if it does not make a request.

To clarify, if we were to implement a route using a hash pattern, the flow would look like this.

Hash is relatively easy to implement and does not require server support.

In addition, we can refer to the implementation of vue-Router

/** * Adds listeners for URL hash changes */ setupListeners () {const router = this.router /** * Resolves the path whenever the hash changes * matches the route */ window.addEventListener('hashchange', () => { const current = this.current /** * transitionTo: * Matches the route * and passes the route configuration, Render new page to uI-view node */ this.transitionto (getHash(), route => {replaceHash(route.fullpath)})}Copy the code

When a hash change is detected, the page can be replaced by replacing the DOM.

Fourteen years later, the HTML5 standard was released. Two new apis, pushState and replaceState, allow you to change urls without sending requests. There’s also an onPopState event. This allows you to implement front-end routing in a different way, but in the same way that you implement hash. With HTML5 implementations, single-page routing urls don’t have an extra #, making them more aesthetically pleasing. But because there are no # numbers, the browser still sends a request to the server when the user does something like refresh the page. To avoid this, the implementation requires server support to redirect all routes to the root page. See: HTML5 Histroy mode

Again, let’s clarify our thinking so that we can write code more easily

This part of vue-Router source code, you can find that the implementation of the idea is generally the same

export class HTML5History extends History { constructor (router, base) { super(router, Base) /** * works just like a hash implementation * matches routes by listening for popState events *, Then update the page DOM */ window.adDeventListener (' popState ', e => { const current = this.current // Avoiding first `popstate` event dispatched in some browsers but first // history route not updated since async guard at the same time. const location = getLocation(this.base) if (this.current === START  && location === initLocation) { return } this.transitionTo(location, route => { if (supportsScroll) { handleScroll(router, route, current, true) } }) }) } go (n) { window.history.go(n) } push (location, onComplete, onAbort) { const { current: FromRoute} = this this.transitionto (location, route => {// Using pushState to update the URL does not cause the browser to send the request, PushState (cleanPath(this.base + route.fullPath)) onComplete && onComplete(route)}, onAbort) } replace (location, onComplete, onAbort) { const { current: FromRoute} = this this.transitionto (location, route => {// replaceState = pushState) ReplaceState (cleanPath(this.base + route.fullPath)) onComplete && onComplete(route)}, onAbort)}}Copy the code

You can also install the package via NPM (functionality is fully implemented and well documented)

npm i router -S
Copy the code