怎么在Vue中使用vue-router傳遞參數(shù)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么在Vue中使用vue-router傳遞參數(shù)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

（1） 設(shè)置好路由配置

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

這里有2個(gè)關(guān)鍵點(diǎn)：

a）給該路由命名，也就是上文中的 name: 'history',

b）在路徑中要使用在路徑中使用冒號(hào)開(kāi)頭的數(shù)字來(lái)接受參數(shù)，也就是上文中的 :deviceId, :dataId；

（2）在v-link中傳遞參數(shù)；

復(fù)制代碼 代碼如下:

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

這里的123，456都可以改用變量。

比如該template所對(duì)應(yīng)的組件有2個(gè)變量定義如下：

data: function() {

 return {

  deviceId:123,

  dataId:456
  }

}

此時(shí)上面那個(gè)v-link可以改寫為：

復(fù)制代碼 代碼如下:

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

（3）在router的目標(biāo)組件上獲取入?yún)?/p>

比如在router目標(biāo)組件的ready函數(shù)中可以這么使用。

 ready: function(){

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

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

 }

上述就是小編為大家分享的怎么在Vue中使用vue-router傳遞參數(shù)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。