第六章：导航守卫

全局守卫

前置守卫

router.beforeEach((to, from, next) => {
  // to: 目标路由
  // from: 来源路由
  // next: 放行函数

  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

后置守卫

router.afterEach((to, from) => {
  // 路由切换后执行
  document.title = to.meta.title || '默认标题'
})

路由独享守卫

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (isAdmin()) {
        next()
      } else {
        next('/403')
      }
    }
  }
]

组件内守卫

<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

// 离开前确认
onBeforeRouteLeave((to, from, next) => {
  if (hasUnsavedChanges.value) {
    const answer = window.confirm('确定离开？未保存的更改将丢失')
    if (answer) next()
    else next(false)
  } else {
    next()
  }
})

// 路由更新时
onBeforeRouteUpdate((to, from, next) => {
  // 处理路由参数变化
  next()
})
</script>

守卫执行顺序

导航触发顺序：
1. beforeRouteLeave (离开组件)
2. beforeEach (全局)
3. beforeRouteUpdate (复用组件)
4. beforeEnter (路由配置)
5. beforeRouteEnter (进入组件)
6. afterEach (全局)

小结

导航守卫要点：

• 全局守卫：beforeEach、afterEach
• 路由独享守卫：beforeEnter
• 组件内守卫：onBeforeRouteLeave、onBeforeRouteUpdate
• 执行顺序：离开 → 全局 → 路由 → 组件

下一章我们将学习路由懒加载。