1. Method
1. There are two ways to redirect routes:
- Declarative navigation: (router-link: must have to attribute), only jump can be realized
- Programmatic navigation:
$router.push | replace, you can handle your own business logic before jumping
2. Routing parameters, two ways of writing parameters:
- params parameter: It belongs to a part of the path, you need to set a placeholder (for example) when declaring the path
/home/:参数变量名, and the access method is$route.params.参数变量名. - Query parameter: It is not part of the path, similar to the query parameter in ajax, the passed
?key=value键值对form, and the access method is$route.query.key.
3. Two forms of routing parameters:
- String method: Concatenate the corresponding string directly according to the routing path format, and then assign it to to or push().
- Object method:
{name:路由规则的名字,params:{键值对},query:{键值对}}, at the same time, it should be noted that the params parameter in the object method must be used with the name attribute . If it is path and parmas, the route can jump, but the content will not be displayed (because the routing rule cannot be matched, unless the path is completely defined in accordance with the routing rule format write). When path and query are matched, placeholders cannot be written in the routing rules, and the content will not be displayed even if the page is written (because the routing rules cannot be matched).
[Extension] Regarding whether the routing rules of params should declare placeholders:
- A placeholder must be set for parameter passing in string mode, otherwise the route will not match and the content will not be displayed.
- The placeholder in the routing rule for parameter passing in the object method can also not be declared, and the jump will not be affected, because the routing rule has been matched by name.
- In fact, it is just to define the display format of the path. If no placeholder is declared, the parmas parameter will not appear in the path. It is generally recommended to write placeholders.
- However, if you do not declare the route placeholder, it will not be displayed in the url path, and you will not be able to get the params parameter once you refresh the page. After declaring it, you can still get it by refreshing the page. (query parameter refresh will not be lost)
Second, some issues involved:
1. What happens if the path placeholder is declared in the routing rule, but the params parameter is not passed in? (Here refers to the case where the name is declared)
[Answer] The page jumps to display the content normally (because the routing rule can already be matched by name), but the console has a warning. And there is a problem with the path, the path of the routing rule is directly omitted, and only the domain name plus the query parameter is displayed. For example: http://localhost:8080/#/?id=1, the correct one should be http://localhost:8080/#/home/userinfo/1?id=1.
2. How to specify whether the params parameter can be passed or not?
[Answer] You only need to add one after the path placeholder when declaring the routing rule ?. For example /home/:id?, the page jumps normally and the path is normal.
3. What happens if the passed params parameter is an empty string?
[Answer] The page is displayed normally, but the path will be wrong. Solution: params: { id: '' || undefined }, join or judge when passing the parmas parameter.
4. The way the routing component passes the props parameter:
- Boolean value writing: only applicable to parmas parameters . Enable it in the routing rules
props:true, and then use props to receive it in the corresponding routing components. The params parameter can be used as an attribute on the routing component, which is more convenient to access (no need to use $route.params.parameter variable name). - Object writing:
props:{键值对}, some additional parameters can be passed. - Function writing: you can pass parmas parameters and query parameters. (rarely used)
props:($route)=>({id:$route.params.id, k:$route.query.id}). This way of writing means that both the params parameter and the query parameter can be used as attributes on the component. It is also to simplify access, but it is rarely used.
Summarize
Personally, I think the most recommended route parameter passing method is dynamic routing (placeholder) + string method parameter passing + opening props , which simplifies parameter passing and use to the greatest extent. If you need to pass in additional parameters and then use the corresponding method.