在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ vue單頁(yè)面應(yīng)用中如何根據(jù)后臺(tái)傳過(guò)來(lái)的不同數(shù)據(jù)去渲染一個(gè)固定樣式的組件？

vue單頁(yè)面應(yīng)用中如何根據(jù)后臺(tái)傳過(guò)來(lái)的不同數(shù)據(jù)去渲染一個(gè)固定樣式的組件？

本人剛學(xué)完vue，第一次使用vue做項(xiàng)目，使用的技術(shù)是vue全家桶。

功能需求是 在首頁(yè)中每次任意點(diǎn)擊一條商家,獲取id,然后根據(jù)id查詢(xún)相關(guān)數(shù)據(jù)庫(kù)，獲取想要的數(shù)據(jù)，最后渲染到同一組件 B組件上。
1.問(wèn)題1：開(kāi)始我使用這個(gè)導(dǎo)航 <router-link :to="{path:'/shopInfo',query: {id:shopId }}" > 跳轉(zhuǎn)到另一B組件頁(yè)面上。shopId 是我點(diǎn)擊某一條商家之后傳給store，然后再用計(jì)算屬性 shopId（）{return this.$store.state.index.id} 獲取的store 中的商家id:
首頁(yè)和B組件中都能獲取并打印這個(gè)id，就是在URL后面看不到id的值 寫(xiě)成固定的數(shù)字就可以看到，也試了通過(guò)中間變量都不行~

2.問(wèn)題2：我考慮把id通過(guò)編程式導(dǎo)航 this.$router.push({ path: /shopInfo/${id} }) 和this.$route.params.id 傳給B組件 然后在B組件中通過(guò)鉤子函數(shù)去調(diào)用發(fā)送請(qǐng)求。查了一下官網(wǎng)，可能用beforeRouteUpdate，但是我沒(méi)搞懂這個(gè)怎么用的？我試了在created中也不行？求大神指導(dǎo)這個(gè)如何實(shí)現(xiàn)的思路~~謝謝

回答
編輯回答
懶豬

兩種方式都行

  1. 使用beforeRouteUpdate

    beforeRouteUpdate (to, from, next) {
  console.log(this.id = to.params.id)
  next()// 記得調(diào)用下next
}

  2. 使用watch$route

    watch: {
  '$route' (newVal, oldVal) {
    console.log(newVal)
  }
}

  3. 還有一種比較“騷”的方法

    // 父組件
<router-view :id="id">
// 子組件內(nèi)定義props:['id'],
計(jì)算屬性依賴(lài)id或watch：id做操作。

推薦你用方法1或方法2，但是方法1和方法2第一次的數(shù)據(jù)都要在created里拿。

2018年1月5日 01:52