Three basic ways to pass parameters in vue routing

 

Option One:

getDescribe(id) {
 //    Directly call $router.push to jump with parameters 
        this .$router.push({
          path: `/describe/${id}`,
        })

 

Option 1 requires the corresponding routing configuration as follows:

  {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

 

Obviously, /:id needs to be added to the path to correspond to the parameters carried by the path in $router.push. Can be used in child components to get the passed parameter value.

$route.params.id

 

Option II:

In the parent component: The matching route is determined by the name in the route attribute, and the parameters are passed through params.

this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })

 

Corresponding routing configuration: Note that :/id cannot be used to pass parameters here, because params is already used to carry parameters in the parent component.

{
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

 

In the child component: this way to get the parameters

$route.params.id

 

third solution:

Parent component: use the path to match the route, and then pass
the parameters through the query. In this case, the parameters passed by the query will be displayed after the url?id=?

 this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

 

Corresponding routing configuration:

{
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

 

Corresponding sub-components: get parameters like this

$route.query.id

 

It is very important to pay special attention here that when getting parameters in subcomponents, it is $route.params instead of
$router~~~