Vue系列：通過(guò)vue-router如何傳遞參數(shù)示例
使用vue-router 來(lái)實(shí)現(xiàn)webapp的頁(yè)面跳轉(zhuǎn)，有時(shí)候需要傳遞參數(shù)，做法如下：
參考文獻(xiàn)：http://router.vuejs.org/en/named.html
主要有以下幾個(gè)步驟：
（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ù)；
<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可以改寫(xiě)為：
<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);
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vuex獲取state對(duì)象中值的所有方法小結(jié)(module中的state)
這篇文章主要介紹了vuex獲取state對(duì)象中值的所有方法小結(jié)(module中的state)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3.0封裝輪播圖組件的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue3初探之ref、reactive以及改變數(shù)組的值
在setup函數(shù)中,可以使用ref函數(shù)和reactive函數(shù)來(lái)創(chuàng)建響應(yīng)式數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue3初探之ref、reactive以及改變數(shù)組值的相關(guān)資料,需要的朋友可以參考下2022-09-09
v-if和v-show的區(qū)別是前端面試中常問(wèn)的基礎(chǔ)知識(shí)點(diǎn),v-if、v-show顧名思義就是用來(lái)判斷視圖層展示效果的,下面這篇文章主要給大家介紹了關(guān)于Vue常用指令v-if與v-show區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-10-10
解決Vue keep-alive 調(diào)用 $destory() 頁(yè)面不再被緩存的情況
這篇文章主要介紹了解決Vue keep-alive 調(diào)用 $destory() 頁(yè)面不再被緩存的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
詳解vuex中mapState,mapGetters,mapMutations,mapActions的作用
這篇文章主要介紹了vuex中mapState,mapGetters,mapMutations,mapActions的作用,需要的朋友可以參考下2018-04-04
Vue項(xiàng)目中首頁(yè)長(zhǎng)時(shí)間白屏的原因以及解決過(guò)程
這篇文章主要介紹了Vue項(xiàng)目中首頁(yè)長(zhǎng)時(shí)間白屏的原因以及解決過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue中的計(jì)算屬性的使用和vue實(shí)例的方法示例
本篇文章主要介紹了vue計(jì)算屬性的使用和vue實(shí)例的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
vue打包后,用后端接口報(bào)錯(cuò)304、404問(wèn)題
這篇文章主要介紹了vue打包后,用后端接口報(bào)錯(cuò)304、404問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了基于vue中的scoped坑點(diǎn)解說(shuō)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09