vue 是当下最主流的前端框架之一，而 vue-router 作为其官方路由管理器，在项目中被大量采用。尽管上手简单，但在真实开发过程中却容易踩坑。本文将全面剖析 vue-router 的两种核心工作模式，深入探讨它们在本地开发与生产部署阶段所暴露的典型问题，并给出经过验证的实用解决策略，助力开发者高效处理各类路由配置难题。
1、 默认启用的是 hash 模式，界面效果如下所示：
2、 该模式借助 URL 中的 hash（即 # 后面的部分）来模拟完整的路径结构，在地址栏变化时无需整页刷新即可完成视图切换。
立即学习“前端免费学习笔记（深入）”；
3、 若希望去除 URL 中冗余且不友好的 hash 符号，可切换至 history 模式，从而获得更干净、更符合语义的路径格式。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
4、 此模式底层依赖浏览器原生的 history.pushState 和 history.replaceState API 实现无刷新跳转，既保持页面状态连续性，又显著优化了交互体验。
5、 启用 history 模式后，URL 显示为标准路径形式，例如：https://www.php.cn/link/8c6dfa6b68fce0253f547f8dc6646714 npm run dev 即可在本地环境中直观查看效果。
6、 虽然开发环境运行顺畅，但一旦部署至真实服务器并手动刷新页面，应用便会瞬间白屏或报 404 错误。
7、 根本原因在于：当访问类似 /first 这样的路径时，Nginx 默认将其视为对物理资源的请求，而单页应用（SPA）并不存在对应的真实文件，因此返回 404。解决方案是在 Nginx 配置中加入 try_files 指令，确保所有前端路由请求均回退至 index.html，再由 vue-router 统一接管解析。经此配置后，整个路由系统稳定运行，真正实现无缝跳转与可靠访问。
