标准答案
- 完整导航会先触发失活组件的 beforeRouteLeave，再触发全局 beforeEach。
- 接着会处理路由配置里的 beforeEnter，以及复用组件的 beforeRouteUpdate、进入组件的 beforeRouteEnter。
- 异步组件解析完成后，会触发全局 beforeResolve；导航确认后触发 afterEach，最后更新 DOM。
- 登录鉴权一般放在 router.beforeEach 中，根据目标路由 meta.requiresAuth、登录态和权限信息决定放行、重定向登录页或跳转无权限页。
- 按钮权限和接口权限不能只靠路由守卫。路由守卫控制页面访问，按钮展示控制体验，真正授权仍要由服务端接口校验。
题目解析
面试里不一定要背每个钩子的完整顺序，但要能说出全局前置守卫适合做登录鉴权。
beforeResolve 发生在异步组件和组件内守卫解析之后，适合做进入页面前的最后确认。
afterEach 不能阻止导航，适合埋点、标题更新、关闭进度条这类导航完成后的副作用。
代码示例
登录鉴权通常读取路由 meta，并保留 redirect 方便登录后返回。
TypeScript
router.beforeEach((to) => {
const authStore = useAuthStore()
if (to.meta.requiresAuth && !authStore.isLoggedIn) {
return {
path: '/login',
query: {
redirect: to.fullPath
}
}
}
if (to.meta.roles && !authStore.hasAnyRole(to.meta.roles as string[])) {
return '/403'
}
return true
})常见误区
- 把登录鉴权分散在每个页面 mounted 里，页面已经渲染后才跳转。
- 在 afterEach 里做拦截逻辑。afterEach 只能观察结果，不能取消导航。
- 只做前端路由权限，后端接口没有校验，直接请求仍然能拿到数据。