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