watch '$route'(to,from)無(wú)效
組件代碼：
watch:{
'$route' (to, from) {
// 對(duì)路由變化作出響應(yīng)...
console.log(to)
}
},
路由配置:
{
path:'/user/:id',
name:'User',
component:() => import ('../views/User'),
children:[
]
},
user 組件我讓其成為異步組件，是想實(shí)現(xiàn)點(diǎn)擊用戶頭像再跳轉(zhuǎn)路由進(jìn)入 /user她渴，從路由參數(shù)中獲取user id發(fā)起ajax請(qǐng)求獲取用戶信息
可最終得到的結(jié)果是：在user組件中使用watch 監(jiān)聽(tīng)路由的變化無(wú)效（我想在監(jiān)聽(tīng)中取出參數(shù)）
注意：不管你的組件是不是異步組件俺附，也會(huì)有此問(wèn)題
原因：
路由組件的渲染區(qū)域?yàn)?router-view，作為頂層出口（官方是這么叫的）它將匹配到的路由組件渲染在該區(qū)域中，路由組件渲染默認(rèn)的方式是銷毀 - 創(chuàng)建倚聚，在組件中加入生命周期函數(shù)可以證明：
created(){
console.log("user 組件被創(chuàng)建")
}
你可以使用瀏覽器的前進(jìn)后退來(lái)跳轉(zhuǎn)頁(yè)面，也可以通過(guò)點(diǎn)擊你設(shè)置的頁(yè)面元素來(lái)進(jìn)行路由跳轉(zhuǎn)
解決方案：
正是因?yàn)榻M件被路由渲染出來(lái)的方式是銷毀 - 創(chuàng)建,那么組件實(shí)例中定義的一系列方法每創(chuàng)建一次組件new Vue()凿可，方法都是新添加上去的惑折，自然 $watch這個(gè)操作就監(jiān)聽(tīng)不到路由的變化，更不用說(shuō)定義在組件中的beforeRouteUpdate這種方法枯跑，所以,要想實(shí)現(xiàn)這個(gè)功能得讓組件成為 復(fù)用組件惨驶，只需加keep-alive即可
<keep-alive>
<router-view></router-view>
</keep-alive>
此后，你的 watch '$route' 將在路由改變的時(shí)候起作用Ａ仓４植贰！加上了keep-alive后你可以測(cè)試到在第一次跳轉(zhuǎn)路由后你定義的生命周期函數(shù) created()將不會(huì)再被調(diào)用辜腺。
