简介

路由钩子，即导航钩子，其实就是路由拦截器，vue-router一共有三类：

  1. 全局钩子：最常用
  2. 路由单独钩子
  3. 组件内钩子

    全局钩子

    在src/router/index.js中 ```javascript // 定义路由配置 const router = new VueRouter({ … })

// 全局路由拦截-进入页面前执行 router.beforeEach((to, from, next) => { // 这里可以加入全局登陆判断 // 继续执行 next(); });

// 全局后置钩子-常用于结束动画等 router.afterEach(() => { //不接受next });

export default router;

  1. <a name="6MioZ"></a>
  2. #### 参数
  3. **每个钩子方法接收三个参数：**<br />to: Route : 即将要进入的目标 [路由对象]<br />from: Route : 当前导航正要离开的路由<br />next: Function : 继续执行函数
  5. - next()：继续执行
  6. - next(false)：中断当前的导航。
  7. - next(‘/‘) 或 next({ path: ‘/‘ })：跳转新页面，常用于登陆失效跳转登陆
  8. <a name="v9G2j"></a>
  9. ## 路由单独钩子
  10. 使用：在路由配置中单独加入钩子，在src/router/index.js中使用，代码如下：
  11. ```javascript
  12. {
  13.     path:'/home/one', // 子页面1
  14.         component: One,
  15.         // 路由内钩子
  16.         beforeEnter: (to, from, next) => {
  17.         console.log('进入前执行');
  18.             next();
  19.         }
  20. }

组件内钩子

在路由组件内定义钩子函数：

  • beforeRouteEnter：进入页面前调用
  • beforeRouteUpdate (2.2 新增)：页面路由改变时调用，一般需要带参数
  • beforeRouteLeave：离开页面调用
  1. <script>
  2. export default {
  3.     name: 'Two',
  4.     data () {
  5.         return {
  6.             msg: 'Hi, I am Two Page!'
  7.         }
  8.     },
  9.     // 进入页面前调用
  10.     beforeRouteEnter(to, from, next) {
  11.         console.log('进入enter路由钩子')
  12.         next()
  13.     },
  14.     // 离开页面调用
  15.     beforeRouteLeave(to,from, next){
  16.         console.log('进入leave路由钩子')
  17.         next()
  18.     },
  19.     // 页面路由改变时调用
  20.     beforeRouteUpdate(to, from, next) {
  21.         console.log('进入update路由钩子')
  22.         console.log(to.params.id)
  23.         next()
  24.     }
  25. }
  26. </script>