How to pass value in route of vuejs framework

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

method A

component passes the value

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.pushRealize 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 use name attribute to correspond to the jump path, similar to post submission, the parameters will not appear in the jump path.

---

axios value passing

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

Method 2

Component passing value

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 queryPass parameters, use the path attribute to correspond to the jump path, similar to getsubmit, the parameters are displayed in the path.

axios pass value

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. YesgetRequest

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

Special reminder

• If you use params to pass parameters, you must use nameAttributes correspond to the jump path
• If you use query to pass parameters, you must use the path attribute to correspond to the jump path

Method 3

Here we only talk about axios value passing

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 postrequest

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!