记录自己做项目中，对于 Vue Router 中的两种路由模式的个人理解。
文章目录
- 前言
- 一、路由的作用
- [二、 Vue Router 的 路由 模式](#二、 Vue Router 的 路由 模式)
- [三、路由模式之---- Hash 模式](#三、路由模式之---- Hash 模式)
- [四、路由模式之---- History 模式](#四、路由模式之---- History 模式)
- [History 模式和Hash 模式的区别 的总结](#History 模式和Hash 模式的区别 的总结)
前言
之前我在写前端Vue项目的时候，在创建其项目的时候，他会让你选择你项目使用的路由模式，于是乎我就想去写一个博客总结一下。
本文介绍的 History 模式 和 Hash 模式 ，这两种路由模式，是以Vue为例子去讲解的，在React Router 和 Angular Router 都有类似于 Vue Router 中的 Hash 模式 和 History 模式，虽然名称和实现方式可能略有不同，但基本概念是一致的。
提示：以下是本篇文章正文内容，仅代表博主个人理解，可供参考。
一、路由的作用
路由他是提供了浏览器地址变化，网页内容也跟随变化 ，实现动态切换的一种效果，他们两个结合起来，就提供了体验良好的单页面Web应用，再去配合AJAX异步请求，可以使我们的页面内容更加丰富多彩。
我们可以在我们的浏览器的左上角，看到这个标志，分别是【后退】、【前进】、【刷新页面】
而我们的路由需要实现三个功能 ：
1、 当浏览器地址变化时，切换页面；
2、点击浏览器【后退】、【前进】按钮，网页内容跟随变化；
3、点击【刷新页面】时，网页加载当前路由对应内容；
二、 Vue Router 的 路由 模式
在使用 Vue CLI 创建项目时，出现的提示是 "Use history mode for router ?"，这一步是让你选择是否启用 Vue Router 的 history 模式。如果你想使用 Hash 模式 路由，你应该输入 N（No），表示不使用 History 模式，默认使用 Hash 模式。这是与路由管理相关的一个配置，影响到前端
路由的工作方式 。
Vue Router 是 Vue.js 的官方路由库，负责处理单页面应用（SPA）中的页面导航。Vue Router 提供2种主要的路由模式：
• Hash 模式 （默认模式）
• History 模式
下面去详细的介绍一下！！！
三、路由模式之---- Hash 模式
Hash 模式：
• URL 结构：在 Hash 模式下，URL 中会包含 # 符号(这个是他标志)。例如：http://example.com/#/about。也可以如下图。
• 工作原理：在 Hash 模式下，# 号后面的部分是用来标识客户端路由的。这部分不会被发送到服务器，所以服务器不会对它做出响应，到时候由前端路由控制其关系(我们可以在路由关系表中，去灵活的控制) 。
• 优点：不需要额外的服务器配置，因为 Hash(# 符号后面的) 部分不会被发送到服务器，到时候会被前端路由拦截，去做匹配关系。
Hash 模式他的路由使用#分开，当#后面的路由发生变化的时候，不需要去向服务器发送信息，到时候就可以去前端路由的对照表里面去寻找，当他需要向后端发送请求的时候可以采用点击事件、声明周期函数等等这样单独的向后端发送请求，这样就可以完美的实现，url变化的时候，前端和后端分离开来，而不是url一发生变化，就请求后端，这样前端也可以去维护自己的前端路由，而Hash 模式就比History 模式 多了一个#而已，其他的都是一样的。
# 后面的内容不会被发送到服务器，前端会根据 # 后面的部分找到对应的路由，前后端是解耦的 。如果用户手动刷新页面或直接访问 URL，请求不会发送到服务器，因为 # 后面的部分（即 hash 部分）不会被发送到服务器，服务器只会处理 # 之前的路径。具体来说，浏览器只会向服务器发送 http://example.com/ 的请求，而不会包含 http://example.com/#/about 中 #/about 这一部分。然后，前端的 JavaScript 会读取 # 后面的路由，进行页面渲染。因此，在 Hash 模式下，不需要服务器特殊配置来处理前端路由，刷新页面或直接访问也不会导致 404 错误。
四、路由模式之---- History 模式
History 模式：
• URL的 结构：在 History 模式下，URL 不会有 # 符号 (这个可能是我们见得比较多的情况) 。例如：http://example.com/about。
• 工作原理：使用 HTML5 提供的 History API（pushState 和 replaceState）来操作浏览器的历史记录，直接改变 URL 。它允许前端路由系统模拟传统的 URL 路径，使 URL 看起来像正常的页面地址。URL 变化时，在前端路由下，由前端路由进行拦截并处理，前端控制页面的切换，而不是每次 URL 变化都向服务器发送请求。
但是他有一个缺点 ：需要在服务器后端需要进行额外的服务器配置，以确保所有路由都返回到 index.html，否则在刷新页面时，服务器会尝试查找实际的物理文件并返回 404 错误。当用户手动刷新或直接访问某个 URL 时，History 模式需要向服务器发送请求(我们后端服务器需要配置，不配置就会报404找不到资源)，Hash 模式则不需要。
History 模式中，URL 发生变化时不会自动向后端请求，只要是通过前端路由控制的页面跳转，URL 变化只会被前端拦截并进行处理，不会向服务器发送请求 。但是，如果用户手动刷新页面或直接访问 URL，那么请求会发送到服务器，如果没有配置服务器的重定向策略，会导致 404 错误。所以需要后端服务器配置，让所有路由都指向同一个 index.html，然后由前端根据路径处理路由逻辑。
so：可以利用nginx，配置一下，防止用户输入一个不存在的，导致返回404报错误！！！在nginx.conf配置中，配置一下，确保用户可能随机输入一个url，不存在的时候，不会导致返回404，全部重定向到index.html中。
⚠️⚠️⚠️url变化的也是通过前端路由去控制的，前端路由怎么定义就按照其关系来，不会向后端发送请求，只有用户手动刷新页面或直接访问 URL ，那么请求会发送到服务器。 这一段话非常的对于理解，非常的重要！！
History 模式和Hash 模式的区别 的总结
History 模式和 Hash 模式的区别主要在于 URL 的表现形式：
如下：
1、Hash 模式通过 # 分隔符处理路由，# 后面的部分不会发送到服务器，页面切换是前端路由控制的 。History 模式通过 HTML5 的 History API 控制，虽然 URL 不包含 #，也是通过前端路由来控制页面跳转，只有用户手动刷新页面或直接访问 URL ，那么请求会发送到服务器。
2、前端路由控制 URL ：在前端路由（无论是 Hash 还是 History 模式）下，URL 变化时，由前端路由进行拦截并处理，前端控制页面的切换，而不是每次 URL 变化都向服务器发送请求。
手动刷新或直接访问时的差别 ：当用户手动刷新或直接访问某个 URL 时，History 模式需要向服务器发送请求(我们后端服务器需要配置，不配置就会报404找不到资源)，Hash 模式则不需要。
以上内容摘选于个人笔记部分！！！