在 Vue Router 前置守卫中调试，可在 beforeEach 回调内加 debugger 语句或在 DevTools 的 Sources 面板手动打行断点，需确保 source map 开启；断点暂停时必须调用 next() 等函数，否则路由挂起导致白屏。
在 Vue Router 的路由前置守卫（如 router.beforeEach）中打断点调试，和普通 JavaScript 函数一样，直接在守卫回调函数内部加 debugger 语句即可，前提是浏览器开发者工具已打开且未禁用断点。
在 beforeEach 中加 debugger
这是最常用、最直接的方式：
router.beforeEach((to, from, next) => {
console.log('即将跳转到：', to.path);
debugger; // ✅ 这里会触发断点，执行暂停
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login');
} else {
next();
}
});
当路由开始跳转、执行到 debugger 行时，浏览器会自动暂停，并高亮当前行，你就可以查看 to、from、next 等参数值，检查逻辑是否符合预期。
配合 Chrome DevTools 手动打行断点
除了写 debugger，你也可以在源码中手动点击行号左侧加断点：
立即学习“Java免费学习笔记（深入）”；
- 确保项目以 source map 方式运行（Vue CLI 或 Vite 默认开启），这样 DevTools 能映射到原始
.js或.ts文件 - 打开 DevTools → Sources 面板 → 找到你的路由配置文件（如
router/index.js） - 点击
beforeEach回调函数内的某一行（比如判断权限那行）左侧空白处，出现红点即设好断点
注意 next() 必须被调用
在断点暂停期间，路由跳转处于“挂起”状态。你必须显式调用 next()（或 next(false)、next('/xxx') 等）才能继续流程，否则页面会卡住、白屏、无响应。
- 不要只看参数就关掉 DevTools —— 记得按 F8（Resume）或点击继续按钮，让
next()执行 - 如果忘记调用
next()，刷新页面或重新触发跳转可恢复
对 Composition API + useRouter 的补充说明
如果你在 setup 中使用 router.beforeEach（比如在插件或入口统一注册），调试方式完全一致；但若是在某个组件内用 onBeforeRouteLeave 等组件内守卫，则断点加在对应钩子函数内部即可，原理相同。
