用户触发导航
    ↓
beforeEach  (全局前置守卫)
    ↓
beforeEnter (路由独享守卫)
    ↓
beforeRouteUpdate (组件内守卫，复用组件时)
    ↓
解析异步路由组件
    ↓
beforeRouteEnter (组件内守卫，进入时)
    ↓
beforeResolve (全局解析守卫) ← 你在这里
    ↓
导航确认
    ↓
afterEach (全局后置钩子)
    ↓
组件生命周期开始 (created/mounted...)

// router/index.js
import router from 'vue-router'

// 全局前置守卫
router.beforeEach((to, from, next) => {
  console.log('1. beforeEach 执行')
  next()
})

// 全局解析守卫
router.beforeResolve((to, from, next) => {
  console.log('4. beforeResolve 执行')
  console.log('此时组件已解析，但尚未创建实例')
  next()
})

// 全局后置钩子
router.afterEach((to, from) => {
  console.log('5. afterEach 执行')
})

// 组件内守卫
export default {
  beforeRouteEnter(to, from, next) {
    console.log('3. beforeRouteEnter 执行')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('组件复用时的守卫')
    next()
  }
}

// ❌ 在组件 created 中加载
// 问题：用户可能看到未加载完成的空白页面
created() {
  this.fetchData()  // 页面已渲染，但数据还没到
}

// ✅ 在 beforeResolve 中加载
// 优势：数据加载完成后才进入页面
router.beforeResolve(async (to, from, next) => {
  // 获取目标路由组件需要的数据
  if (to.meta.requiresData) {
    try {
      // 可以访问到组件的静态选项
      const component = to.matched[0].components.default
      
      // 如果组件定义了预加载方法
      if (component.asyncData) {
        const data = await component.asyncData(to)
        // 将数据存储到全局状态（如 Vuex）
        store.commit('setPageData', data)
      }
      next()
    } catch (error) {
      next(error)
    }
  } else {
    next()
  }
})

<!-- 组件内定义预加载逻辑 -->
<script>
export default {
  // 静态方法，在 beforeResolve 中调用
  asyncData({ store, route }) {
    return store.dispatch('fetchArticle', route.params.id)
  },
  
  mounted() {
    // 此时数据已经存在，直接使用
    console.log('页面数据已就绪')
  }
}
</script>

router.beforeResolve(async (to, from, next) => {
  // 需要动态权限验证的页面
  if (to.meta.requiresDynamicPermission) {
    // 确保用户信息已加载（可能来自 beforeEach 中的异步操作）
    if (!store.state.user.userInfo) {
      await store.dispatch('fetchUserInfo')
    }
    
    // 调用权限验证接口
    const hasPermission = await checkUserPermission(to.path)
    
    if (!hasPermission) {
      next({
        path: '/403',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

router.beforeResolve(async (to, from, next) => {
  // 检查是否需要加载配置
  if (to.meta.requiresConfig && !window.appConfig) {
    try {
      // 加载配置文件
      const config = await fetch('/config.json')
      window.appConfig = config
      
      // 动态加载依赖配置的模块
      if (to.meta.lazyModule) {
        await import(/* webpackChunkName: "lazy-module" */ './lazyModule')
      }
      next()
    } catch (error) {
      next(error)
    }
  } else {
    next()
  }
})

// store/modules/loading.js
const loadingModule = {
  state: {
    isGlobalLoading: false,
    loadingText: ''
  },
  mutations: {
    SET_LOADING(state, { isLoading, text = '加载中...' }) {
      state.isGlobalLoading = isLoading
      state.loadingText = text
    }
  }
}

// router/index.js
let loadingTimeout = null

router.beforeEach((to, from, next) => {
  // 设置超时保护，避免无限加载
  loadingTimeout = setTimeout(() => {
    store.commit('SET_LOADING', { isLoading: false })
  }, 10000)
  
  store.commit('SET_LOADING', { 
    isLoading: true, 
    text: `正在进入${to.meta.title || '页面'}...` 
  })
  next()
})

router.beforeResolve((to, from, next) => {
  // 在即将进入页面前，更新加载文案
  store.commit('SET_LOADING', { 
    isLoading: true, 
    text: '即将进入页面...' 
  })
  next()
})

router.afterEach(() => {
  // 清除超时，关闭加载状态
  clearTimeout(loadingTimeout)
  store.commit('SET_LOADING', { isLoading: false })
})

router.beforeResolve((to, from, next) => {
  // 记录页面开始加载的时间点
  if (!to.meta.startTime) {
    to.meta.startTime = Date.now()
  }
  next()
})

router.afterEach((to, from) => {
  // 上报页面加载性能数据
  if (to.meta.startTime) {
    const loadTime = Date.now() - to.meta.startTime
    
    // 上报到监控平台
    analytics.track('page_load_complete', {
      path: to.path,
      loadTime,
      hasAsyncData: !!to.meta.requiresData
    })
  }
})

// ❌ 错误：此时组件实例还未创建
router.beforeResolve((to, from, next) => {
  console.log(this.$route)  // undefined
  console.log(to.matched[0].instances.default)  // undefined
  next()
})

// ✅ 正确：通过组件选项访问
router.beforeResolve((to, from, next) => {
  const component = to.matched[0].components.default
  console.log(component.asyncData)  // 可以访问静态方法
  next()
})

router.beforeResolve((to, from, next) => {
  // ✅ 正确：确保所有分支都调用 next
  if (condition) {
    next('/login')
  } else {
    next()  // 必须调用
  }
  
  // ❌ 错误：忘记调用 next
  if (condition) {
    next('/login')
  }
  // 条件不满足时没有 next，导航会卡住
})

router.beforeResolve((to, from, next) => {
  // ❌ 避免：每次导航都执行重操作
  const heavyData = processLargeData()
  
  // ✅ 优化：使用缓存
  if (!cachedData) {
    cachedData = processLargeData()
  }
  next()
})