Shulou(Shulou.com)06/03 Report--

This article is to share with you about how vuejs framework routes pass values. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The method of routing value in vuejs framework: 1. Call "$router.push (...)" directly. Statement to carry parameters to jump to transfer values; 2, using axios to pass values, you can call "this.$axios.get (...)" Statement to pass a value.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Summarize the routing values in Vue, which involves the use of axios

It is easy to confuse these methods when using them.

Mode one component passes values

Corresponding routing configuration:

{path:'/ detail/:id', name: 'Detail', component: Detail}

Note: be sure to add /: id,id after the route is just a parameter name. It doesn't matter, but it needs to be consistent with the parameter name when passing and receiving.

Directly call $router.push to jump with parameters.

This.$router.push ({path: `/ detail/$ {id}`})

Note: when passing parameters by jumping, the path is enclosed in two backquotes instead of double or single quotes, and the required parameters are passed in the form of ${}

Receive in a subcomponent

This.$route.params.id

Note: route, not router

If you use the name in the route attributes to determine the matching route for passing 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: you cannot use /: id to pass parameters here, because params is already used in the parent component to carry parameters.

Receive parameters in the subcomponent:

This.$route.params.id

Again, it's route, not router.

Pass parameters with params, and use the name attribute to correspond to the jump path, which is similar to post submission, and the parameters will not appear in the jump path.

Axios value

When we need to bring the front-end data to the back-end interface

You can also pass values in this way.

For example:

The code in the front end that calls the back-end interface:

This.$axios.get (`http://127.0.0.1:3000/api/user/find/${id}`)

Receive in the backend:

Router.get ('/ find/:id', (req,res) = > {/ / receive let id = req.params.id})

Note that it is a get request

Such a request will be displayed in the address bar.

Address bar link example: http://127.0.0.1:3000/api/user/find/10

Mode two components pass values

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

Then receive it in the subcomponent:

This.$route.query.id

Note: the parameter name must be consistent when passing. When receiving, don't use params, use query to receive.

Pass parameters with query, use the path attribute to correspond to the jump path, similar to get submission, and the parameters are displayed in the path.

Axios value

If you want to use it in axios, you can do this:

For example:

The frontend calls the backend API 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 on it, but it is more convenient.

Note: is wrapped in two backquotes, followed by the use of? Number, not /

In this way, you can pass multiple values in the address bar at once, with the & character in the middle, which is a get request.

Because the browser's address bar has a length limit, it is not recommended 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: don't add anything after / delete here. Use query to receive when receiving.

If you pass a value in this way, it will also be displayed in the address bar

Address bar link example: http://127.0.0.1:3000/api/user/delete?name=zhangsan&age=10

Special reminder

If you use params to pass parameters, be sure to use the name attribute to correspond to the jump path

If you use query to pass parameters, be sure to use the path attribute to correspond to the jump path

Mode 3

It only says here that the value is passed by axios

Axios value

When we call the back-end interface to insert data into the database (add data), we can use the following:

The frontend calls the backend API:

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, save them into data, and then take them out of data.

Receive at the back end:

Router.post ('/ add', (req,res) = > {let name = req.body.name;let age = req.body.age;})

Note: body is used to receive here, which is a post request.

Generally speaking, when we want to submit data to the server, we use the post request. This request method is secure. In this way, the data will not be displayed in the address bar.

Thank you for reading! This is the end of the article on "how to transmit value in vuejs Framework routing". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.