對于動態(tài)路由/user/:name夺脾，組件為 User
操作 1：從其他頁面跳轉(zhuǎn)到/user/duke
操作 2：從/user/duke跳轉(zhuǎn)到/user/lemon
操作 3：從user/lemon跳轉(zhuǎn)到/user/duke
操作 2 和 3 時組件User會被復(fù)用之拨，組件的生命周期函數(shù)都不會被觸發(fā)，這就意味著我們無法修改組件的狀態(tài)及頁面視圖咧叭，Vue 官方提供了兩種方法去監(jiān)聽route的變化
方法 1：使用watch監(jiān)聽
watch: {
$route(to, from) {
console.log("to =>", to);
console.log("from =>", from);
this.user = to.params.name;
// 對路由變化作出響應(yīng)...
}
},
方法 2：使用路由守衛(wèi)
beforeRouteUpdate(to, from, next) {
// react to route changes...
// don't forget to call next()
}
這兩種方法效果其實是一樣的蚀乔，只會在操作 2 和 3 中觸發(fā)，在操作 1 中無法觸發(fā)佳簸。
方法 3：使用生命周期補全方法 1 | 2
操作 1 會觸發(fā)掛載鉤子函數(shù)乙墙，所以我們可以mounted+方法 1 | 2 覆蓋操作 1颖变、2生均、3 的場景
