3 basic modes for Vue routing parameters

Routing is a bridge connecting each page, and parameters play an extremely important role in it. In a sense, it determines whether the two bridges can be connected successfully.

In vue routing, the parameter transmission method in 3 is supported.

In the scenario, click the li element of the parent component to jump to the child component and carry parameters to facilitate the child component to obtain the corresponding li data and display the corresponding correct content.

In parent component:

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

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 $.
// Can be used in subcomponents to get the passed parameter value.$

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: Note that you cannot use :/id to pass parameters here, because the parent component has used params to carry parameters.  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

//Subcomponent: This way to get parameters$

Plan 3:

// Parent component: Use path to match routes, and then pass parameters through queryIn this case queryThe passed parameters will be displayed inurllater?id=？
  this.$({
     path: '/describe',
     query: {
      id: id
     }
    })

// Corresponding routing configuration:  {
   path: '/describe',
   name: 'Describe',
   component: Describe
  }

// Corresponding subcomponents: This way to get parameters$

// Pay special attention here to get parameters in the child component instead of $$router This is very important~~~

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.