Article Directory
1. Build routing components
Explain what a route is: a route is a set of mapping relationships (key - value), where the key is a path, and the value may be a function or a component.
If you want to use routing in vue2, you need to install a plugin vue-router.
1.1 Install vue-router
Create corresponding directories and components
1.2 Configure routing
The routes configured in the project are generally stored in the router folder
2. Using routing
Figure 1:
Figure II :
3. Routing jump
The above is to manually switch the route through the url. This is definitely not possible. Users can’t understand these things. Let’s take a look at the two jump modes of the route.
3.1 Declarative Navigation
The first type of routing jump: declarative navigation through router-link label for routing jump
3.2 Programmatic Navigation
The first type of routing jump: programmatic navigation uses push | replace for routing jump.
Regarding what declarative navigation can do, programmatic navigation can also do. Regarding programmatic navigation, in addition to routing jumps, you can also do some other business logic
4. Routing parameters
Regarding routing parameters, there are two types of parameters
- params parameter: It belongs to a part of the path. It should be noted that when configuring the route, it needs to occupy a place
- query parameter: not part of the path, similar to queryString in ajax,
/student?k=v&kv=no need to pass parameters
4.1 Routing passing parameters: string format
Figure 1:
Figure II:
Using template strings
Figure II :
Figure 3:
4.2 Routing passing parameters: object writing
Figure 1:
Figure II :
Figure 3:
4.3 Interview questions related to routing parameters
Topic 1: Can the path be used in combination with the params parameter for routing parameters (object writing)?
Figure 1:
Figure II :
Question 2: How to specify whether the params parameter can be passed or not?
Figure 1:
Topic 3: The params parameter can be passed or not, but how to solve it if the passed is an empty string?
Topic 4: Can routing components pass props data
Figure 1:
Figure II :
Figure 3:
Regarding props passing parameters, in general, it is a simplification of getting params parameters and query parameters.
5. meta usage
Figure 1:
6. Rewrite the push and replace methods
Both push and replace are used by programmatic routing. Here, if the push or replace method is executed multiple times, a warning error will be NavigationDuplicatedthrown .
Demonstrate it:
Figure II:
Let's solve this problem:
Figure 1: A solution that treats the symptoms but not the root cause
Figure 2: Complete solution
In fact, whether this problem is dealt with or not has little impact on the program, but as a programmer, it is unavoidable to feel a little uncomfortable when seeing the red.