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

創(chuàng)新互聯(lián)長期為上千客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為武陵源企業(yè)提供專業(yè)的做網(wǎng)站、成都做網(wǎng)站，武陵源網(wǎng)站改版等技術服務。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

（1） 設置好路由配置

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

這里有2個關鍵點：

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

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

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

復制代碼 代碼如下:

history

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

比如該template所對應的組件有2個變量定義如下：

data: function() {

 return {

  deviceId:123,

  dataId:456
  }

}

此時上面那個v-link可以改寫為：

復制代碼 代碼如下:

history

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

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

 ready: function(){

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

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

 }

上述就是小編為大家分享的怎么在Vue中使用vue-router傳遞參數(shù)了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站名稱：怎么在Vue中使用vue-router傳遞參數(shù)-創(chuàng)新互聯(lián)
文章分享：http://weahome.cn/article/dcohij.html