博客

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){	     
         		...
        }
    }
   

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