对于动态路由/user/:name，组件为 User
操作 1：从其他页面跳转到/user/duke
操作 2：从/user/duke跳转到/user/lemon
操作 3：从user/lemon跳转到/user/duke
操作 2 和 3 时组件User会被复用，组件的生命周期函数都不会被触发，这就意味着我们无法修改组件的状态及页面视图，Vue 官方提供了两种方法去监听route的变化
方法 1：使用watch监听
watch: {
$route(to, from) {
console.log("to =>", to);
console.log("from =>", from);
this.user = to.params.name;
// 对路由变化作出响应...
}
},
方法 2：使用路由守卫
beforeRouteUpdate(to, from, next) {
// react to route changes...
// don't forget to call next()
}
这两种方法效果其实是一样的，只会在操作 2 和 3 中触发，在操作 1 中无法触发。
方法 3：使用生命周期补全方法 1 | 2
操作 1 会触发挂载钩子函数，所以我们可以mounted+方法 1 | 2 覆盖操作 1、2、3 的场景
