How to use route parameter passing in vue

This article mainly introduces you to relevant information about the pitfalls encountered in routing parameter transmission in Vue. The article introduces it in detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it Let’s learn together with the editor below.

Preface

There are many types of route jump parameters in vue. The ones I commonly use are the following ones

• Jump through router-link

• Route jump through programming navigation

This article mainly introduces it to you Regarding some pitfalls encountered in passing Vue routing parameters, I would like to share them for everyone’s reference and study. I won’t say much below, let’s take a look at the detailed introduction.

First of all, the definition of my route

{
 path: '/b',
 name: 'B',
 component: resolve => require(['../pages/B.vue'], resolve)
}

I jump from component A to component B and pass some parameters through the routing information object

this.$router.push({
 path: '/b',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

Obtaining parameters in component B

this.$route.query.paramB  //b
this.$route.params.paramA //undefined

The parameter paramB passed through the params object of the route is always undefined, and the reason can never be found. After consulting the information, I finally found the reason. That is because the route's params object must be called through the route name, but not through the path, and the query object does not have this requirement.

So we modify the code:

this.$router.push({
 name: 'B',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

Just replace the path parameter with the corresponding route name. At this time, everything will be normal when getting the parameters.

this.$route.query.paramB  //b
this.$route.params.paramA //a

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use the audio component in the WeChat mini program

How to use the video component to play videos in the WeChat mini program

How to implement the download progress bar in the WeChat applet

How to use the mobile phone number verification tool PhoneUtils in javaScript

The above is the detailed content of How to use route parameter passing in vue. For more information, please follow other related articles on the PHP Chinese website!