vue 监听路由变化

1. watch监听：
   1. 监听一级路由：路由组件的渲染区域为router-view，作为顶层出口，它将匹配到的路由组件渲染在该区域中，路由组件渲染默认的方式是销毁 - 创建，因此$watch是监听不到一级路由的变化的。所以，要想使用$router监听一级路由，需要让组件成为复用组件，也就是使用keep-alive包裹router-view。

      <keep-alive>
           <router-view />
      </keep-alive>
      
      watch: {
            $route: {
                handler(to,from) {
                     if(from && (from.name === 'adoptSelect')){
                          this.active = 2
                      }
                },
                deep:true,
                immediate: true
            }
       }
      

   2. 监听子路由：需要在有子路由的情况下，才能在当前组件监听到子组件的路由变化，直接使用下面的方式即可。

      watch: {
           $route(to,from){	     
            		...
           }
       }
      

2. 路由导航守卫：

   //不能获取组件实例 `this`，因为当守卫执行前，组件实例还没被创建
   beforeRouteEnter(to,from,next){
         if(from.name !== 'adoptDetail'){
             next({
                 path:'/adopt'
             })
         }else{
             next()
         }
   }