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)開頭的數(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可以改寫為：
<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)文章
基于vue2.0+vuex+localStorage開發(fā)的本地記事本示例
這篇文章主要介紹了基于vue2.0+vuex+localStorage開發(fā)的本地記事本示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
在Echarts圖中給坐標(biāo)軸加一個(gè)標(biāo)識(shí)線markLine
這篇文章主要介紹了在Echarts圖中給坐標(biāo)軸加一個(gè)標(biāo)識(shí)線markLine，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
深入淺析Vue.js中 computed和methods不同機(jī)制
這篇文章給大家介紹了Vue.js中 computed和methods不同機(jī)制，在vue.js中，methods和computed兩種方式來(lái)動(dòng)態(tài)當(dāng)作方法使用，文中還給大家提到了computed和methods的區(qū)別，感興趣的朋友一起看看吧2018-03-03
vue項(xiàng)目啟動(dòng)如何設(shè)置默認(rèn)啟動(dòng)頁(yè)
這篇文章主要介紹了vue項(xiàng)目啟動(dòng)如何設(shè)置默認(rèn)啟動(dòng)頁(yè)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家介紹了VueUse使用及造輪子選擇對(duì)比示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue觸發(fā)真實(shí)的點(diǎn)擊事件跟用戶行為一致問題
這篇文章主要介紹了vue觸發(fā)真實(shí)的點(diǎn)擊事件跟用戶行為一致問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
在vue+element ui框架里實(shí)現(xiàn)lodash的debounce防抖
今天小編就為大家分享一篇在vue+element ui框架里實(shí)現(xiàn)lodash的debounce防抖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了vue對(duì)枚舉值轉(zhuǎn)換方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue 條件渲染v-if和v-show，在模板中，可以根據(jù)條件進(jìn)行渲染。條件用到的是v-if、v-else-if以及v-else來(lái)組合實(shí)現(xiàn)的，有時(shí)候我們想要在一個(gè)條件中加載多個(gè)html元素，那么我們可以通過(guò)template元素上實(shí)現(xiàn)，下面就來(lái)看看具體實(shí)現(xiàn)吧2021-10-10
這篇文章主要介紹了vue中@keyup.enter失效問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10