Vue Series: How to Pass Parameters through vue router Sample

Using vue-router to implement webapp page jump, sometimes you need to pass parameters as follows:

References: http://router.vuejs.org/en/named.html

There are mainly the following steps:

(1) Set up the routing configuration

router.map({
 '/history/:deviceId/:dataId': {
 name: 'history', // give the route a name
 component: { ... }
 }
})

Here are two key points:

a) gives the route a name, which is name above: 'history',

b) In the path, the number that begins with a colon in the path is used to accept the parameter, which is: deviceId,: dataId;

(2) Passing parameters in v-link;

<a v-link="{ name: 'history', params: { deviceId: 123, dataId:456 }}">history</a>

Here, 123, 456 can be used as variables instead.

For example, the component corresponding to the template has two variables defined as follows:

data: function() {

 return {

  deviceId:123,

  dataId:456
  }

} 

At this point, the above v-link can be rewritten as:

<a v-link="{ name: 'history', params: { deviceId: deviceId, dataId: dataId }}">history</a>

(3) Obtain input parameters on the target component of router

For example, this can be used in the ready function of the router target component.

 ready: function(){

  console.log('deviceid: ' + this.$route.params.deviceId);

  console.log('dataId: ' + this.$route.params.dataId);

 }