Summary of the basic implementation methods of vue routing parameter transfer [three methods]

This article describes the basic implementation method of vue routing parameters. Share it for your reference, as follows:

Preface

The use scenarios of vue route parameter transfer are generally applied when the parent route jumps to the child route, carrying parameter jumps. The transmission method can be divided intoparamsTransfer ginseng andqueryPass the ginseng, andparamsParameter transfer can be divided into two ways: display parameters in the url and not display parameters. These are the three ways of routing parameters by vue.

Method 1: Params parameter transfer (display parameters)

paramsParameter transfer (display parameters) can be divided into two ways: declarative and programming

1. Declarativerouter-link

This method is throughrouter-linkThe to attribute implementation of the component, the parameters of the method can be a string path, or an object describing the address. When passing values ​​using this method, the subroutine needs to configure the parameters in advance, for example:

//Subrouting configuration{
 path: '/child/:id',
 component: Child
}
// Parent routing component<router-link :to="/child/123">EnterChildrouting</router-link>

2. Programmingthis.$

When passing values ​​using this method, the subroutine also needs to configure parameters in advance, for example:

//Subrouting configuration{
 path: '/child/:id',
 component: Child
}
//The parent route program passes parameters (usually triggered by events)this.$({
  path:'/child/${id}',
})

In the subroutine, you can use the following code to get the passed parameter value

this.$

Method 2: Params parameter transmission (no parameters are displayed)

paramsParameter transfer (no parameters are displayed) can also be divided into two ways: declarative and programming. The difference from the method is that this is an alias for routing.namePassing value

1. Declarativerouter-link

This method also passesrouter-linkComponent's to attribute implementation, for example:

<router-link :to="{name:'Child',params:{id:123}}">EnterChildrouting</router-link>

2. Programmingthis.$

When passing values ​​using this method, the subroutine also needs to configure the parameters in advance, but it cannot be used anymore:/idTo pass the parameters, because the parent route has been usedparamsCome carry parameters, for example:

//Subrouting configuration{
 path: '/child,
 name: 'Child',
 component: Child
}
//The parent route program passes parameters (usually triggered by events)this.$({
  name:'Child',
  params:{
   id:123
  }
})

In the subroutine, you can use the following code to get the passed parameter value

this.$

Note: The above useparamsThe method of passing the url parameters does not display will cause the passed value to be lost when refreshing the page.

Method 3: query parameter transmission (display parameters)

query parameter transfer (display parameters) can also be divided into two ways: declarative and programming.

1. Declarativerouter-link

This method also passesrouter-linkThe component's to attribute implementation, but when passing values ​​using this method, the subroutine needs to configure the routing alias (name attribute) in advance, for example:

//Subrouting configuration{
 path: '/child,
 name: 'Child',
 component: Child
}
// Parent routing component<router-link :to="{name:'Child',query:{id:123}}">EnterChildrouting</router-link>

2. Programmingthis.$

When passing values ​​using this method, the subroutine also needs to configure the routing alias (name attribute) in advance, for example:

//Subrouting configuration{
 path: '/child,
 name: 'Child',
 component: Child
}
//The parent route program passes parameters (usually triggered by events)this.$({
  name:'Child',
  params:{
   id:123
  }
})

In the subroutine, you can use the following code to get the passed parameter value

this.$

I hope this article will be helpful to everyone's programming.