Vue-router 导航守卫有哪些

Vue-router 的导航守卫主要有以下几种：

1. 全局前置守卫：使用 router.beforeEach 注册，在路由跳转前触发。主要用于登录验证、权限检查等场景。

2. 全局解析守卫：使用 router.beforeResolve 注册，在导航被确认之前调用，通常用于确保路由的异步操作完全解析[³]。

3. 全局后置钩子：使用 router.afterEach 注册，在路由跳转完成后触发。常用于记录日志或执行一些全局操作[⁵]。

4. 路由独享守卫：在路由配置上直接定义 beforeEnter 守卫，这些守卫只适用于特定的路由[¹]。

5. 组件内的守卫：包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。这些守卫在组件级别执行，允许对组件实例进行更细粒度的控制[²]。

以下是具体举例说明：

1. 全局前置守卫

   • 示例：用户未登录时重定向到登录页面。
   • 代码：

     router.beforeEach((to, from, next) => {
       if (to.name !== 'Login' && !isAuthenticated) {
         next({ name: 'Login' });
       } else {
         next();
       }
     });
     

2. 全局解析守卫

   • 示例：确保所有异步数据加载完成后再进行导航。
   • 代码：

     router.beforeResolve((to, from, next) => {
       if (to.meta.requiresAsyncData) {
         // 确保异步数据加载完成
         myAsyncDataLoadingFunction().then(() => {
           next();
         });
       } else {
         next();
       }
     });
     

3. 全局后置钩子

   • 示例：记录用户访问的每个页面。
   • 代码：

     router.afterEach((to, from) => {
       console.log(`Navigated to: ${to.fullPath}`);
     });
     

4. 路由独享守卫

   • 示例：特定路由需要额外的权限检查。
   • 代码：

     const router = new VueRouter({
       routes: [
         {
           path: '/admin',
           component: Admin,
           beforeEnter: (to, from, next) => {
             if (hasAdminPermission) {
               next();
             } else {
               next('/');
             }
           }
         }
       ]
     });
     

5. 组件内的守卫

   • beforeRouteEnter：组件渲染前调用，不能访问 this。
   • 示例：通过回调函数获取组件实例。
   • 代码：

     beforeRouteEnter (to, from, next) {
       next(vm => {
         console.log('Component instance:', vm);
       });
     }
     

   • beforeRouteUpdate：当前路由改变但组件被复用时调用。
   • 示例：响应式更新组件数据。
   • 代码：

     beforeRouteUpdate (to, from, next) {
       this.data = to.params.id; // 假设组件有一个 data 属性来存储 id
       next();
     }
     

   • beforeRouteLeave：离开组件时调用。
   • 示例：提示用户保存未保存的更改。
   • 代码：

     beforeRouteLeave (to, from, next) {
       if (this.unsavedChanges) {
         let answer = window.confirm('Do you really want to leave? You have unsaved changes!');
         if (answer) {
           next();
         } else {
           next(false);
         }
       } else {
         next();
       }
     }