1. What is routing
- Routing (English: router) is the corresponding relationship. Routing is divided into two categories:
① Back-end routing
② Front-end routing
2. Backend routing
- Backend routing refers to the correspondence between request methods, request addresses, and function processing functions. In the node.js course, the basic usage of express routing is as follows:
3. SPA and front-end routing
- SPA means that a web site has only one HTML page, and the display and switching of all components are completed in this one and only page. At this point, switching between different components needs to be implemented through front-end routing.
- Conclusion: In the SPA project, the switching between different functions depends on the front-end routing to complete!
4. What is front-end routing
- An easy-to-understand concept: the correspondence between Hash addresses and components.
5. How front-end routing works
① The user clicks the routing link on the page
② The Hash value in the URL address bar changes.
③ The front-end routing monitors the change of the Hash address
. ④ The front-end routing renders the component corresponding to the current Hash address in the browser.
- Conclusion: Front-end routing refers to the correspondence between Hash addresses and components!
6. Implement simple front-end routing
- Step 1: Import and register the three components MyHome, MyMovie and MyAbout. The sample code is as follows:
- Step 2: Dynamically switch the components to be displayed through the is attribute of the label. The sample code is as follows:
- Step 3: Declare the following three links in the component structure, and switch the Hash value in the browser address bar by clicking on different links:
- Step 4: In the created life cycle function, monitor the change of the Hash address in the browser address bar, and dynamically switch the name of the component to be displayed:
