Vue router uses query and params to transmit parameters, and vueparams

Vue router uses query and params to transmit parameters, and vueparams

Preface:

Parameter passing is an operation frequently used by the front end. Parameters on the previous page are required in many scenarios. This article will introduce in detail how the vue router transmits parameters, and some small details. If you have any need, you can make a reference. If you like it, you can click likes or pay attention to them. I hope they can help you.

How does Vue router transmit parameters?

What is params and query?

Params:/router1/: id,/router1/123,/router1/789, the id here is called params

Query:/router1? Id = 123,/router1? Id = 456. The id here is called query.

Routing interface:

Router. js:

Route settings here, when you use the params method to pass Parameters, you need to add a parameter name after the route, and when passing parameters, the parameter name must correspond to the parameter name set after the route. There is no such restriction when using the query method. You can directly use it in the jump.

 

NOTE: If no parameter is set on the route, you can pass it over, but your parameter is not displayed on the url, when you jump to another page or refresh the page, the parameters will be lost (as shown in), and the http request or other operations dependent on this parameter will fail.

 

Note that the preceding routing parameter id is set on the route, and id2 is not set in the route. Therefore, after refreshing, id2 disappears. In the project, we cannot always ask users to refresh.

Component 1:

<Template> <div class = "app_page"> 
Programmatic navigation jump:
You can also use the programmatic navigation in the router document to redirect the parameter passing through the previous router-link.
This. $ router. push ({name: 'router1', params: {id: status, id2: status3}, query: {queryId: status2}); // write a jump to a function, trigger by clicking or other methods
These two parameters have the same effect. The programmed navigation can be used to determine the jump status, such as whether to authorize, log on, and so on, you can skip this programmatic navigation and try again later.
Component 2:
<Template> <div class = "router1"> 
It is relatively simple to pass the parameter. You can successfully pass the parameter based on the usage method of the component above.
Tip: Get the parameters above the route. $ route is used, and r is not followed.
What is the difference between params parameter passing and query parameter passing:
1. Usage

The query must be introduced by path, and params must be introduced by name. The receiving parameters are similar: this. $ route. query. name and this. $ route. params. name.
Note that when receiving parameters, it is already $ route rather than $ router !!
2. displayed
Query is more similar to get parameters in ajax, while params is similar to post. It is simpler to say that the former displays parameters in the browser address bar, while the latter does not.
Query:

Params:

3. params is a part of a route and must be included. Query is the parameter after the url. It does not matter.
Once params is set in the route, params is part of the route. If this route has params parameters but this parameter is not passed during the jump, the jump will fail or the page will have no content.
For example: Jump/router1/: id
<Router-link: to = "{name: 'router1', params: {id: status }}"> correct </router-link> <router-link: to = "{name: 'router1', params: {id2: status }}"> error </router-link>
4. parameters can be passed if params and query are not set. If params is not set, refreshing the page or returning parameters will be lost. As mentioned above
After that:

This article is over here. If it is not well written, please forgive me. The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.