Vuejs framework routing value transfer method: 1. Directly call the "$router.push(...)" statement to carry parameters to jump to transfer the value; 2. Use axios to transfer the value, you can call "this .$axios.get(...)" statement to pass the value.
The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.
Summarize the routing value transfer in Vue, which involves the use of axios
It is easy to confuse these methods when using them
and the corresponding routing configuration:
{ path: '/detail/:id', name: 'Detail', component: Detail }
Note: Be sure to add /:id
after the route. id is just a parameter name, it doesn’t matter, but it needs to be consistent with the parameter name when passing and receiving
Direct call$router.push
Realize jump with parameters
this.$router.push({ path:`/detail/${id}` })
Note: When jumping to pass parameters, path
is followed by two backticks instead of double quotes or single quotes, and ${} is used Pass the required parameters in the form of
Receive it in the subcomponent
this.$route.params.id
Note: It is route
, not router
If you use name
in the routing attribute to determine the matching route and pass parameters, you need to do this:
Configuration of the corresponding route:
{ path: '/detail', name: 'Detail', component: Detail }
Jump with parameters:
this.$router.push({ name: 'Detail', params: { id: id } })
Note: /:id
cannot be used to pass parameters here, because the parent component , params
has been used to carry parameters.
Receive parameters in the subcomponent:
this.$route.params.id
Again, it is route
, not router
Use
params
to pass parameters, and usename
attribute to correspond to the jump path, similar topost
submission, the parameters will not appear in the jump path.
When we need to bring the front-end data to the back-end interface
We can also pass values in this way
For example:
Code for calling the backend interface in the front end:
this.$axios.get(`http://127.0.0.1:3000/api/user/find/${id}`)
Receive in the backend:
router.get('/find/:id',(req,res)=>{ //接收let id = req.params.id })
Note that it is a get request
Such a request method will be displayed in the address bar
Example of address bar link: http://127.0.0.1:3000/api/user/find/10
Corresponding routing configuration:
{ path: '/detail', name: 'Detail', component: Detail }
Jump with parameters:
this.$router.push({ path:'/detail', query:{ id:id } })
Note: query
is used here and then received in the sub-component:
this.$route.query.id
Note: The parameter name must be used when passing Keep it consistent. When receiving, do not use params
, but use query
to receive
Use
query
Pass parameters, use thepath
attribute to correspond to the jump path, similar toget
submit, the parameters are displayed in the path.
If you want to use it in axios, you can do this:
For example:
The front end calls the back end Interface code:
this.$axios.get(`http://127.0.0.1:3000/api/user/delete?name=${name}&age=${age}`)
In fact, this is the same as writing another query
above, but this is simpler
Note: Use two backticks Wrap it up, and use the ? symbol instead of /
In this way, you can pass multiple values in the address bar at once, and connect them with the ampersand in the middle. Yesget
Request
Because the browser’s address bar has a length limit, it is not recommended to use this method if there are too many parameters
Receive in the backend:
router.get('/delete'(req,res)=>{ let name = req.query.name; let age = req.query.age; })
Note: Do not add anything after /delete
here, use query
when receiving Receive
Use this method to pass the value, and the
address bar link example will be displayed in the address bar: http://127.0.0.1:3000/api/ user/delete?name=zhangsan&age=10
params
to pass parameters, you must use name
Attributes correspond to the jump pathquery
to pass parameters, you must use the path
attribute to correspond to the jump pathHere we only talk about axios value passing
When we call the back-end interface to insert data into the database (add data), It can be used like this:
The front-end calls the back-end interface:
this.$axios.get(`http://127.0.0.1:3000/api/user/add`,{name=this.name,age=this.age`})
The name and age after the equal sign are the data you get from the form, and then they are saved in the data, and then taken from the data. Come out
to receive at the backend:
router.post('/add',(req,res)=>{ let name = req.body.name; let age = req.body.age; })
Note: Use body
when receiving here, which is post
request
Generally when we want to submit data to the server, we use post
request. This request method is safe. If you use this method, the data will not be displayed in the address bar. .
Related recommendations: "vue.js Tutorial"
The above is the detailed content of How to pass value in route of vuejs framework. For more information, please follow other related articles on the PHP Chinese website!