vue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法
更新時間：2017年11月10日 10:10:41 作者：wj204
下面小編就為大家?guī)硪黄獀ue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
1.標(biāo)簽
<li v-for=" el in hotLins" >
<router-link :to="{path:'details',query: {id:el.tog_line_id}}">
<img :src="el.image_list[0]">
<h3>{{el.tourism_name}} {{el.tog_line_id}}</h3>
<p>{{el.address}}</p>
</router-link>
</li>
2.在組件中，需要傳動態(tài)參數(shù)時，可以如上例子
<router-link :to="{path:'details',query: {id:el.tog_line_id}}">
3.query中的參數(shù)id就是要傳的參數(shù)，在組件中獲取的方法為：
created: function() {
var id = this.$route.query.id;
this.getData(id);
},
4.如上述，this.$route.query.id就可以獲取該參數(shù)，也可以通過，this.$root.id = id;傳給父組件，父組件中通過
// 根組件構(gòu)造器
var vm = Vue.extend({
router: router,
data: function() {
return {
id: '11484' //城會玩明細(xì)id
}
}
});
5.定義data中的id，然后子組件中用props傳遞參數(shù)
props: {
id: {
type: String,
required: true
}
},
6.router-view中，傳遞該參數(shù)：
<router-view :id="id" :order-info="orderInfo"> </router-view>
注意orderInfo時，在這邊用的是:order-info。
以上這篇vue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli2.9.3 詳細(xì)教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了Vue 進(jìn)入/離開動畫效果，代碼簡單易懂，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-12-12
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue被設(shè)計為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue使用csp的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)帶漸變效果的折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
大家可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。這篇文章主要介紹了vue表單詳解,需要的朋友可以參考下2018-04-04
本篇文章主要介紹了Vue-cli代理解決跨域問題，詳細(xì)的介紹了Vue如何設(shè)置代理，具有一定參考價值，有興趣的可以了解一下2017-09-09
這篇文章主要介紹了vue項目中使用this.$confirm方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
watch是由用戶定義的數(shù)據(jù)監(jiān)聽，當(dāng)監(jiān)聽的屬性發(fā)生改變就會觸發(fā)回調(diào)，這項配置在業(yè)務(wù)中是很常用。在面試時，也是必問知識點(diǎn)，一般會用作和computed進(jìn)行比較。那么本文就來帶大家從源碼理解watch的工作流程，以及依賴收集和深度監(jiān)聽的實(shí)現(xiàn)2022-12-12
這篇文章主要介紹了vue中和小程序中使用iconfont的方法，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
VUE+ElementUI下載文件的幾種方式(小結(jié))
本文主要介紹了VUE+ElementUI下載文件的幾種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01