VUE的几种路由钩子

淡淡的烟草味﹌ 2023-03-04 10:29 5阅读 0赞

## 全局钩子 ##

在main.js中写入：

**beforeEach（（to,from,next）=>\{ \}）：全局前置守卫**

Router.beforeEach((to,from,next)=>{ 
          ......
    })

**afterEach（（to,from）=>\{ \}）：全局后置钩子**

Router.afterEach((to,from)=>{ 
          ......
    })

## 某个路由独享钩子 ##

在路由配置中定义的钩子

**beforeEnter**

{ 
      path:"/home",
      component:resolve=>require(["../components/home.vue"],resolve),
      beforeEnter:(to,from,next)=>{ 
          ......
      }
    }

**beforeLeave**

{ 
      path:"/home",
      component:resolve=>require(["../components/home.vue"],resolve),
      beforeLeave:(to,from,next)=>{ 
          ......
      }
    }

## 组件内钩子 ##

在路由组件里定义的导航钩子

**beforeRouteLeave**

methods:{ 
          beforeRouteLeave(to,from,next){ 
                .......
          }
      }

**beforeRouteEnter**

methods:{ 
          beforeRouteEnter(to,from,next){ 
                .......
          }
      }

**beforeRouteUpdate**

methods:{ 
          beforeRouteUpdate(to,from,next){ 
                .......
          }
      }

## 参数说明·： ##

钩子参数：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>to：Route</td> 
   <td>即将要进入的目标 路由对象</td> 
  </tr> 
  <tr> 
   <td>from：Route</td> 
   <td>当前导航正要离开的路由</td> 
  </tr> 
  <tr> 
   <td>next：Function</td> 
   <td>这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数。</td> 
  </tr> 
 </tbody> 
</table>

next的参数：

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>next()</td> 
   <td>进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）</td> 
  </tr> 
  <tr> 
   <td>next（false）</td> 
   <td>中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址</td> 
  </tr> 
  <tr> 
   <td>next（‘/’）</td> 
   <td>或者 next({ path: ‘/’ }): 跳转到一个不同的地址，当前的导航被中断，然后进行一个新的导航</td> 
  </tr> 
 </tbody> 
</table>