這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在Vue中使用vue-router傳遞參數(shù),文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
為海倫等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及海倫網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計、海倫網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
(1) 設(shè)置好路由配置
router.map({ '/history/:deviceId/:dataId': { name: 'history', // give the route a name component: { ... } } })
這里有2個關(guān)鍵點:
a)給該路由命名,也就是上文中的 name: 'history',
b)在路徑中要使用在路徑中使用冒號開頭的數(shù)字來接受參數(shù),也就是上文中的 :deviceId, :dataId;
(2)在v-link中傳遞參數(shù);
復(fù)制代碼 代碼如下:
<a v-link="{ name: 'history', params: { deviceId: 123, dataId:456 }}">history</a>
這里的123,456都可以改用變量。
比如該template所對應(yīng)的組件有2個變量定義如下:
data: function() { return { deviceId:123, dataId:456 } }
此時上面那個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)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享文章:怎么在Vue中使用vue-router傳遞參數(shù)
文章出自:http://jinyejixie.com/article4/ghdcoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、外貿(mào)建站、ChatGPT、面包屑導(dǎo)航、移動網(wǎng)站建設(shè)、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)