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 属性来存储 idnext();
     }
     

   • 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();}
     }