面试题：Vue Router嵌套路由下的导航守卫优化与异常处理

实现权限验证和操作记录保存的方法

全局导航守卫：可以在router.js文件中使用router.beforeEach来进行全局的权限验证。这样在每次路由切换前都会执行权限验证逻辑。

import router from './router'
import store from './store'

router.beforeEach((to, from, next) => {
  const hasPermission = store.getters.hasPermission // 假设从vuex获取权限信息
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (hasPermission) {
      next()
    } else {
      next({ name: 'Login' }) // 跳转到登录页
    }
  } else {
    next()
  }
})

优点：全局统一处理，代码集中，便于维护和管理所有路由的权限验证逻辑。缺点：如果逻辑复杂，会导致beforeEach函数变得臃肿，难以维护。对于特定路由的特殊处理不够灵活。

路由独享守卫：在定义路由时，可以在单个路由配置中使用beforeEnter来进行权限验证。例如：

const routes = [
  {
    path: '/admin/dashboard/user/:userId',
    name: 'UserDetail',
    component: UserDetail,
    beforeEnter: (to, from, next) => {
      const hasPermission = store.getters.hasPermission
      if (hasPermission) {
        next()
      } else {
        next({ name: 'Login' })
      }
    }
  }
]

优点：针对单个路由进行定制化的守卫处理，逻辑清晰，不影响其他路由。缺点：如果有多个路由需要相同的权限验证逻辑，会导致代码重复。

组件内导航守卫：在组件内部使用beforeRouteEnter进行进入路由前的权限验证，使用beforeRouteLeave保存用户操作记录。例如：

export default {
  name: 'UserDetail',
  data() {
    return {
      // 组件数据
    }
  },
  beforeRouteEnter(to, from, next) {
    const hasPermission = this.$store.getters.hasPermission
    if (hasPermission) {
      next()
    } else {
      next({ name: 'Login' })
    }
  },
  beforeRouteLeave(to, from, next) {
    const saveResult = this.$store.dispatch('saveUserOperation', {
      operation: 'leave UserDetail',
      userId: this.$route.params.userId
    })
    if (saveResult) {
      next()
    } else {
      this.$message.error('操作记录保存失败')
      next(false)
    }
  }
}

优点：与组件紧密结合，方便访问组件内的数据和方法。对于当前组件相关的操作处理非常方便。缺点：逻辑分散在各个组件中，不利于整体的统一管理和维护。

异常处理

权限验证失败：
- 页面提示：可以使用UI库的提示组件，如Element UI的$message来显示提示信息，例如this.$message.error('权限不足，请登录')。
- 路由跳转：跳转到登录页面，如next({ name: 'Login' })。
操作记录保存失败：
- 页面提示：同样使用提示组件，如this.$message.error('操作记录保存失败')。
- 路由处理：可以阻止离开当前路由，如next(false)，让用户知道操作记录未保存成功。也可以根据业务需求，在提示后继续跳转，如next()。

星途面试题库

面试题：Vue Router嵌套路由下的导航守卫优化与异常处理

知识考点

面试题答案

实现权限验证和操作记录保存的方法

异常处理