溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關怎么在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傳遞參數了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
