Detailed explanation of three examples of Vue routing parameters

Three ways to pass parameters in Vue routing

• params transfer
• Routing attribute configuration parameter transfer
• query pass

1. Params transmission

this.$({ 
	name:"admin",
	//The params here is an object, the id is the attribute name, and the value (can be directly taken from the current component or Vue instance)	params:{id:} 
}) 

//The routing configuration corresponding to this component{
	//Component path	path: '/admin',
	//Component alias	name: 'admin',
	//Component Name	component: Admin, 
} 

Pass the parameter through params. If we want to get the parameter value of id, we can passthis.$You can get it by printing it out in this way;

Notice: When obtaining parameters, it is $route, when jumping and passing parameters, it is $router

2. Transfer parameters to the routing attribute configuration:

this.$({
	name:"/admin/${}", 
}) 


//The routing configuration corresponding to this component{ 
	//Component path	path: '/admin:id', 
	//Component alias	name: 'admin', 
	//Component Name	component: Admin, 
}

By configuring the routing attribute, we can usethis.$to get the value of id,

NoticeThis. The path in the $ method contains the value, and the routing configuration item contains the corresponding variable name (attribute name) to implement;

The above two argument transmission methods can basically be understood as the post request method in ajax.All parameters are invisible, but the above two methods have one disadvantage, that is,The parameter value cannot be obtained after the page is refreshedYes, so is there a way to make the parameters still exist after the page is refreshed?

3. Query transmission

this.$({ 
	name:"/admin", 
	query:{id：} 
}) 


//The routing configuration corresponding to this component{ 
	//Component path	path: '/admin', 
	//Component alias	name: 'admin', 
	//Component Name	component: Admin, 
}

The third method is to use query to pass parameters. This method can solve the problem of page refresh parameters disappearing. This method can be understood as the get method in ajax. The parameters are directly added after the url, and the parameters are visible. Therefore, it is recommended to use this method to solve the problem of page refresh parameters disappearing;

the difference

(1) Params transmission parameters

• Only use name, not path.
• The address bar does not display the parameter name id, but there are values ​​for the parameter.

(2) Query transmission

• Both name and path can be used. When using path, the provided path value must be relative toRoot pathThe relative path of the parent route is not the relative path of the parent route, otherwise it cannot be accessed successfully.
• The parameter format of the address bar is ?id=0&code=1

Pay special attention

The difference between route and router. route represents routing attributes; router represents routing instances.

The above 3 are the basic ways to route parameters. In addition to the above, you can also use sessionStorage/localStorage/cookie for storage or storage, or use VUEX, depending on the scenario.

Summarize

This is the end of this article about the three ways of Vue routing parameters. For more related content on Vue routing parameters, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!