vue-router有哪⼏种导航钩⼦

vue-router 提供了多种导航钩子（也称为导航守卫），这些钩子允许你在路由发生变化时执行一些操作，如检查用户权限、数据预加载等。以下是 vue-router 中常见的几种导航钩子及其示例：

 

全局前置守卫（beforeEach）

 

这是最常用的导航守卫之一，它在路由跳转前触发。你可以在这里执行一些诸如检查用户登录状态的操作。

 

javascript

router.beforeEach((to, from, next) => {

  // 检查是否已登录

  if (!isLoggedIn()) {

    // 如果未登录，则重定向到登录页面

    next('/login');

  } else {

    // 如果已登录，则正常跳转

    next();

  }

});

 

 

在这个例子中，to 是即将要进入的目标路由对象，from 是当前导航正要离开的路由对象，next 是一个函数，必须调用该方法来 resolve 这个钩子。

2. 全局后置守卫（afterEach）

 

这个守卫在路由跳转完成后触发，不接收 next 函数，也不会改变导航本身。

 

javascript

router.afterEach((to, from) => {

  // 路由跳转完成后，可以在这里做一些清理工作，如关闭模态框、隐藏导航栏等

  // 注意：这里没有 next 函数

});

 

路由独享的守卫（beforeEnter）

 

你可以在路由配置中直接定义 beforeEnter 守卫：

 

javascript

const router = new VueRouter({

  routes: [

    {

      path: '/foo',

      component: Foo,

      beforeEnter: (to, from, next) => {

        // ...

      }

    }

    // ... 其他路由

  ]

});

 

 

这个守卫与全局前置守卫类似，但它只在当前路由中生效。

4. 组件内的守卫

beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用，即当路由导航确认前，同时在组件实例还没被创建之前调用。

beforeRouteUpdate（2.2+）：在当前路由改变，但是该组件被复用时调用。

beforeRouteLeave：导航离开该组件的对应路由时调用。

 

例如：

javascript

export default {

  data() {

    return {

      // ...

    };

  },

  beforeRouteEnter(to, from, next) {

    // 在渲染该组件的对应路由被 confirm 前调用

    // 不！能！获取组件实例 `this`

    // 因为当守卫执行前，组件实例还没被创建

  },

  beforeRouteUpdate(to, from, next) {

    // 在当前路由改变，但是该组件被复用时调用

    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

  },

  beforeRouteLeave(to, from, next) {

    // 导航离开该组件的对应路由时调用

    // 可以访问组件实例 `this`

  }

};