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)的方式是銷(xiāo)毀 - 創(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)的方式是銷(xiāo)毀 - 創(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)用。
閑言碎語(yǔ)：
順帶提一句：出自圖靈叢書(shū) 深入淺出 Vue.js
在Vue.js 的整個(gè)生命周期中艳狐，初始化實(shí)例屬性是第一步定硝，那么我所要用到的
$watch這個(gè)東西在組件開(kāi)發(fā)中寫(xiě)作watch，這種東西在vue 中叫做實(shí)例方法毫目。查API 可得到：
并且以
$開(kāi)頭的屬性是提供給用戶使用的外部屬性蔬啡，以_開(kāi)頭的是提供給內(nèi)部使用的內(nèi)部屬性
既然 生命周期中，初始化實(shí)例屬性是第一步镀虐，那初始化初始化實(shí)例方法自然在后頭箱蟆，所以會(huì)有點(diǎn)問(wèn)題！
該書(shū)我并沒(méi)有看完刮便，完全是根據(jù)我所遇到的問(wèn)題各處查了下資料空猜，屬于斷章取義，如有錯(cuò)誤恨旱，望指出辈毯，謝謝
