2、然后旧的组件是否能重用canReuse，不重用的是否能canDeactivate，再看新的组件是否canActivate，再后把不能重用的能销毁的给deactivate
3、这样旧的不重用的组件就结束了它的生命周期了，所以这时候在结束生命周期之前执行调用afterEach函数
4、新组建开始的话先是activate，然后再是data，如果重用的话就没有销毁，所以一直在activate中，只是执行data钩子。
那么这样的钩子函数对应给vue2.x会是怎样的呢？？？（--------待验证-------）
1、最先执行的是 beforeEach钩子，所有路由开始的时候最先执行。
2、然后就是 router 的配置中的beforeEnter。
3、接下来是 路由的 beforeRouteEnter ----- 然后是组件自身的生命周期 ------ 路由 beforeRouteLeave
beforeRouteEnter (to, from, next) {} 与 beforeRouteLeave不再是组件中route配置下的对象了，他们和data处于同级别的地位。
可以看出： 新设计的路由 淡化了组件自身跟着路由生命周期变化而变化，而是依赖组件自身的生命周期，只有两个简单的 路由级别的钩子 beforeRouteEnter beforeRouteLeave
那么接下来：
ajax调用时机：相对于组件来说的，而且应该是在路由进入之前开始准备的 所以beforeRouteEnter是调用ajax的时机。
watch这一函数可以监听路由$route变化。
beforeRouteLeave在组件的生命周期完成后，且旧路由即将切换走，新路由beforeEach的时机执行。
watch的使用时机：
当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。
不过，这也意味着 组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：
const User = { template: '...', 1、watch: { '$route' (to, from) { // 对路由变化作出响应... } } 2、watch: { '$route': 'fetchData' // 如果路由有变化，会再次执行fetchData方法 },