在用vue開(kāi)發(fā)spa的時(shí)候，遇到過(guò)這樣一種情況，路由地址為http://localhost:8080/m/list/305038信息詳情頁(yè)面创淡。
如圖所示：
圖片.png
圖片.png
但是在這信息詳情頁(yè)面下方有推薦信息，推薦信息的路由為
http://localhost:8080/m/list/305004。相同路由具有不同參數(shù)的鏈接望侈，后臺(tái)又是根據(jù)信息id獲取數(shù)據(jù)的，我們希望在vue中created方法里從根據(jù)id從后臺(tái)獲取信息詳情勋桶。
created () {
this.loadData();
},
這是點(diǎn)擊推薦信息會(huì)發(fā)現(xiàn)根本沒(méi)有變化脱衙，路由參數(shù)變了，沒(méi)有像預(yù)想的一樣哥遮，調(diào)用created()方法中的this.loadData()向后臺(tái)請(qǐng)求加載數(shù)據(jù)岂丘。開(kāi)始想是不是由于生命周期鉤子用的不對(duì)，緊接著又用了幾個(gè)鉤子例如activated() mounted() updated()發(fā)現(xiàn)皆不會(huì)被觸發(fā)眠饮。那該怎么辦奥帘？ 聯(lián)想到vue的watch來(lái)觀察值的變化，試試能不能觀察路由參數(shù)變化仪召，如果變化了寨蹋，我就調(diào)用this.loadData()松蒜。沒(méi)想到還真的行，代碼如下:
watch:{
"$route":"loadData"
}
看代碼知其意已旧，監(jiān)聽(tīng)route秸苗，如果改變了則調(diào)用loadData方法。解決問(wèn)題运褪，嘿嘿惊楼。可能是對(duì)vue了解不夠深入秸讹，目前還沒(méi)有發(fā)現(xiàn)更好的解決方案檀咙。如果你有快快在下方留言告訴我吧。
