Front-end routing
Foreword
First, we describe two basic concepts.
- MPA multi-page applications
- SPA single page applications
Multi-page application that every page switch, back-end server will return a new html document.
Single-page application, that is, each time the page is switched, the content is generated by rendering JavaScript.
Mentioned single-page application, you have to mention another concept.
- MVC design pattern (Model-View-Controller)
Part Model (model), i.e., data processing logic (access data in the database).
View (View), i.e. the portion of data processing (the data model created based on the view).
Controller (Controller), i.e., the user interaction processing section (read data from the view data, control a user input, and transmits the data model)
SPA (single page applications) is based on the MVC design pattern , i.e., the trigger controller, transmitting data to the model, and thus change the view.
In the SPA, the occurrence of three steps:
- By changing the hash or history
- JavaScript through the DOM element is selected
- Re-inject JavaScript code
It is worth mentioning that, in step 3. We injected code is a class , the class will have attributes and methods , to show the html code of the page, is called a template (template) of the property , through the insertion of innerHTML selected element.
First, the basic functions of routing
- Static Routing
- Dynamic Routing
- Nested routing
- Routing parameter passing
- Permissions and redirection
- error
Static Routing: the class without any treatment.
Dynamic Routing: i.e. carrying an id value, based on the class id value, the corresponding data display.
Nested route: i.e. the parent sub-route will add routing path.
Parameter passing route: i.e. class will accept parameters, the parameters of the corresponding data for display.
Redirection permissions: i.e. before the injection of the class would be a determination whether the token is present, it exists the specified class injection, injection does not exist other classes (redirection).
Error: error appears, will inject a display 404 class.
Advanced functions of the two, routing
- Life cycle - guard
- transition
- Performance - demand loading
- Scroll Scroll
Life cycle - Guard: class method, is injected into the page render just one, there are other ways (different state of the route) and render methods, a common component lifecycle class execution. In some ways before and after the render method, often becomes the navigation (routing is changing) guard
Transition: Let routing switcher with a certain animation
Performance - demand loading: In routing configuration using import ( '...') inert to load the code, and returns a Promise
Scroll Scroll: When switching to a new route, you want to roll the top of the page, or keep the original scroll position, just reload the page as