Front knowledge
Before understanding the front-end routing principle of single page application, let’s first understand what single page application, what is multi-page application, and what is the difference between them?
What is a single page application?
Single page application refers to that when entering the page for the first time, an HTML file will be requested. When switching to other components, although the path will change correspondingly, there will be no new HTML file request. The principle is that JS will sense the change of URL, and then JS will dynamically clear the content of the current page. Then the content of the next page is mounted to the current page. At this time, the routing is not done by the back end but by the front end to determine which component is displayed on the page. This process is single-page application.
Advantages and disadvantages of single-page applications
Advantages: Fast page switching: There is no need to request HTML files when a page is switched, which reduces the DELAY of HTTP sending.
Disadvantages: Single application’s first screen page load time is slow, the first screen load requires a HTML requests and JS request at a time, time is relatively slow, and SEO effect is poor, because search engine only to know the contents of the HTML, but a single page application by JS renders the contents of the many needs search engines don’t recognize this part, will lead to SEO effect is not good.
What is a multi-page application?
A multi-page application is one in which the server returns a new HTML document each time a page is jumped. This type of application is called a multi-page application.
Advantages and disadvantages of multi-page applications
Advantages: fast loading of the first screen, good SEO effect. Because when the client sends a request to the server, the server only returns an HTML page, it loads faster.
Disadvantages: slow page cutting flowers.
The difference between a single-page app and a multi-page app
- Different application composition
A multi-page application is composed of multiple different pages, while a single-page application is composed of a shell page and multiple page fragments.
- The page can be accessed in different modes
In a multi-page application, page hopping jumps from one page to another, while in a single page, a page fragment is deleted or hidden and another page fragment is loaded.
- Whether public resources are reloaded after the jump
A multi-page application needs to be reloaded after a jump, but a single page does not need to be reloaded.
- Different user experience
Multi-page applications load quickly but slowly on the first screen. Single-page applications load slowly but switch quickly on the first screen.
- Pages pass data differently
Multi-page applications rely on URL, Cookie and LocalStorage to transfer data, while single-page applications rely on components to communicate, which is relatively simpler.
Principles of front-end routing
In essence, the principle of front-end routing is to modify the URL without refreshing the browser, detect the CHANGE of THE URL, capture the URL address, and achieve UI update by parsing and matching routing rules. Routes are usually implemented in two forms: Hash mode and History mode.
Mechanism of Hash routing
In Hash mode, a part of the url # later said is a client state, when this part of the change, the browser itself will not refresh, thus satisfy the first condition, namely in the case of not refresh your browser to modify the browser link, at the same time, through monitoring hashChange events to monitor the change of the Hash value in the url, Trigger related functions to change related components.
History Mechanism of routing
The History mode takes advantage of HTML5’s History API. The history.pushState and history.replaceState methods can manipulate the browser’s History without refreshing the page, thus satisfying the first condition. The URL changes are then silhouetted by listening for popState events, which trigger related functions to change related components.