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