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