Detailed explanation of three basic methods of vue routing parameters

This article mainly introduces three basic methods of Vue routing parameters. The article introduces the example code in detail, which has a certain reference value for everyone's learning or work. Friends who need it can refer to it.

In the following scenario, click the parent component's li element to jump to the child component and carry parameters to facilitate the child component to obtain data.

In parent component:

<li v-for="article in articles" @click="getDescribe()">

methods：

Plan 1:

getDescribe(id) {
// Directly call $ to implement jumps carrying parameters    this.$({
     path: `/describe/${id}`,
    })

Scheme 1, the corresponding routing configuration is as follows:

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

Obviously, you need to add /:id in the path to correspond to the parameters carried by the path in $. It can be used in a child component to get the passed parameter value.

this.$

Plan 2:

In the parent component: determine the matching route by the name in the routing attribute, and pass parameters through params.

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

Corresponding routing configuration: You can add:/id or not. If you don’t add data, it will be displayed behind the url. If you don’t add data, it will not be displayed.

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

In the subcomponent: This way to get parameters

this.$

Plan 3:

Parent component: Use path to match routes, and then pass parameters through query

In this case, the parameters passed by query will be displayed after the url?id=?

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

Corresponding routing configuration:

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

Corresponding subcomponents: This way to get parameters

this.$

Notes:

1) Here we should pay special attention to jump to child components in parent components

this.$("/Home");//Not passing the parametersthis.$({
})；//Transfer the ginseng，Parameters are added to object braces as fields{ }middle

2) When obtaining parameters in the child component,

this.$

Note that it is route, not router

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.