做前端开发的，谁没被路由跳转卡顿、页面白屏、懒加载失效折腾过？尤其是项目越做越大，Vue、React、Next.js、Nuxt 这些主流框架混着用，路由配置稍不注意，就容易变成「玄学调试现场」。
不是配个 router 就完事了
比如你用 Vue Router 4 搭了个管理后台，又接入了微前端 qiankun —— 主应用路由和子应用路由一打架，history.pushState 后页面不刷新，或者返回键直接跳出了整个系统。这不是 bug，是集成时没理清生命周期和路由守卫的执行顺序。
React Router + Next.js 的「双路由陷阱」
Next.js 自带文件系统路由（app router），但有些老模块还在用 React Router v6 手动管理。结果就是：/dashboard 页面里嵌了个 legacy 组件，它用 navigate('/user') 跳转，却触发了 React Router 的本地跳转，而不是 Next.js 的服务端重定向。页面地址变了，但 layout 不更新，header 还挂着旧标题。
解法其实简单：统一入口，禁用客户端路由接管：
const router = useRouter();
// 替代 React Router 的 navigate
router.push('/user', undefined, { shallow: false });Nuxt 3 和 Pinia 联动优化路由状态
在 Nuxt 3 中，useRouter() 获取的路由实例默认不响应式。如果你在 middleware 里存了个 from.path，后面组件里想读取却拿不到更新值，大概率是忘了用 useState 或 useRoute().path 做响应式绑定。
推荐写法：
const route = useRoute();
const previousPath = useState('prevPath', () => route.fullPath);
// 在 onBeforeRouteUpdate 钩子里更新
onBeforeRouteUpdate((to) => {
previousPath.value = route.fullPath;
});别让 SSR 成为路由优化的绊脚石
用 Next.js 或 Nuxt 做 SEO，常遇到「首屏路由正确，F5 刷新后 404 或跳转异常」。根本原因往往是：API 路由和页面路由用了不同 base path，或者中间件里写了 window.location.href —— SSR 环境根本没有 window。
检查点很实在：所有路由跳转必须走框架提供的 API（如 useRouter().push），所有环境判断加 typeof window !== 'undefined' 包裹，服务端渲染阶段只做数据预取，不做跳转。
真实场景：中后台系统切换主题时的路由缓存冲突
某次上线前发现，用户切深色模式后，再进 /report 页面，表格列宽错乱。查了一圈，原来是 keep-alive + 动态 import() 的组合在 Vue Router 中没清掉缓存组件的状态，而主题切换触发了全局 class 重绘，但 cached 组件的 computed 没重新求值。
解决方式不是关 keep-alive，而是给路由加个唯一 key：
<router-view :key="route.fullPath + $store.state.theme" />一行代码，比翻三天源码强。