這期內容當中小編將會給大家帶來有關怎么在Vue中使用vue-router傳遞參數，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

為海倫等地區用戶提供了全套網頁設計制作服務，及海倫網站建設行業解決方案。主營業務為成都做網站、成都網站設計、海倫網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

（1） 設置好路由配置

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

這里有2個關鍵點：

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

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

（2）在v-link中傳遞參數；

復制代碼 代碼如下:

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

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

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

data: function() {

 return {

  deviceId:123,

  dataId:456
  }

}

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

復制代碼 代碼如下:

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

（3）在router的目標組件上獲取入參

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

 ready: function(){

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

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

 }

上述就是小編為大家分享的怎么在Vue中使用vue-router傳遞參數了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創新互聯行業資訊頻道。

分享文章：怎么在Vue中使用vue-router傳遞參數
文章出自：http://www.yijiale78.com/article4/ghdcoe.html

成都網站建設公司_創新互聯，為您提供網站收錄、外貿建站、ChatGPT、面包屑導航、移動網站建設、服務器托管

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯