鍍金池/ 問(wèn)答/HTML/ vue2.0 從一個(gè)頁(yè)面向另一個(gè)頁(yè)面跳轉(zhuǎn)并傳參，如何實(shí)現(xiàn)傳參后把數(shù)據(jù)更新到頁(yè)面上

vue2.0 從一個(gè)頁(yè)面向另一個(gè)頁(yè)面跳轉(zhuǎn)并傳參，如何實(shí)現(xiàn)傳參后把數(shù)據(jù)更新到頁(yè)面上？

比如我現(xiàn)在在頁(yè)面A跳轉(zhuǎn)到頁(yè)面B，A中的router-link :to={path:’B’,params:{id:’5’}}

clipboard.png

clipboard.png

求助：在頁(yè)面B中的mounted生命周期函數(shù)中使用this.$route.params.id,然后通過(guò)id的值進(jìn)行其他操作，但是頁(yè)面沒有新的操作路由或者操作頁(yè)面的程序，導(dǎo)致數(shù)據(jù)拿到但是頁(yè)面沒更新，得手動(dòng)刷新頁(yè)面才能出現(xiàn)最終要的結(jié)果，如何解決？

回答
編輯回答
咕嚕嚕

'$route'(to, from) {

 執(zhí)行數(shù)據(jù)更新對(duì)應(yīng)的方法  比方說(shuō)
 this.id = this.data_id

}

2017年8月24日 02:00
編輯回答
使勁操

1.使用wacth去監(jiān)聽路由變化

watch: {
  '$route': xxxx
},

2.使用beforeRouteUpdate 的路由回調(diào)鉤子

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒被創(chuàng)建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 可以訪問(wèn)組件實(shí)例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪問(wèn)組件實(shí)例 `this`
  }
}

詳細(xì)的看這里教程

2018年1月15日 21:17