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

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

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

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

2.問題2：我考慮把id通過編程式導(dǎo)航 this.$router.push({ path: /shopInfo/${id} }) 和this.$route.params.id 傳給B組件 然后在B組件中通過鉤子函數(shù)去調(diào)用發(fā)送請求。查了一下官網(wǎng)，可能用beforeRouteUpdate，但是我沒搞懂這個怎么用的？我試了在created中也不行？求大神指導(dǎo)這個如何實(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'],
計算屬性依賴id或watch：id做操作。

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

2018年1月5日 01:52