Vue Router的两种模式hash和history模式的对比

history：

History API通过修改浏览器历史记录栈和改变url来实现不触发页面刷新的情况下改变浏览器的 URL 和历史记录。

history API 提供了 pushState() 和 replaceState() 方法

-pushState()：向浏览器的历史记录栈添加一个新的条目，同时改变地址栏的 URL。

-replaceState()：替换当前的历史记录条目，同样会改变地址栏的 URL。

-popstate:popstate 是 window 对象的一个事件，它与浏览器的历史记录（history 对象）紧密相关。当用户通过浏览器的前进、后退按钮操作或者调用 history.back()、history.forward()、history.go() 方法改变历史记录栈时，就会触发 popstate 事件。

单页面应用SPA通常会使用前端路由系统（如 Vue Router、React Router 等）监听 popstate 事件，以及 history API 操作导致的 URL 变化。当 URL 改变时，它会找到匹配的路由规则，然后加载并渲染对应的组件。

---

hash：

hash（哈希值）是 URL 中 # 符号后面的部分，例如 https://example.com/#/page1 中的 #/page1 就是 hash。当浏览器加载页面时，它不会将 hash 部分发送到服务器，而是通过监听 hashchange 事件来感知 hash 的变化。

前端框架（如 Vue Router、React Router 等）利用 hashchange 事件来实现路由功能。当 hash 发生变化时，框架会根据新的 hash 值匹配相应的路由规则，并加载和渲染对应的组件。

• 兼容性好：hash 模式在所有主流浏览器中都有很好的支持，包括一些较老的浏览器版本。这是因为 hashchange 事件的兼容性较高，使得 hash 模式能够在各种环境下稳定运行。
• 无需后端配置：由于 hash 部分不会被发送到服务器，所以在服务器端不需要进行额外的配置来处理路由。无论 URL 的 hash 如何变化，服务器只需要返回相同的 HTML 页面，前端框架会在页面加载后根据 hash 来处理路由逻辑。
• 页面跳转行为：当 hash 改变时，浏览器会在历史记录中添加一条新记录，用户可以通过浏览器的前进和后退按钮来导航不同的 hash 状态。但是，这种跳转不会触发页面的重新加载，只是在当前页面内进行组件的切换，从而实现了单页面应用的效果。、

在组件中使用路由导航：

• 在 Vue 组件中，可以使用 $router.push 方法来进行页面切换。例如，在一个按钮的点击事件中：

methods: {
  goToAbout() {
    this.$router.push('/about');
  }
}

当点击按钮触发 goToAbout 方法时，Vue Router 会将浏览器地址栏的 hash 值改为 #/about，同时根据路由配置，渲染对应的 About 组件，实现页面切换。

• 也可以使用 <router-link> 组件来实现页面切换，它会自动生成带有正确 hash 值的链接。例如：

<router-link to="/about">关于</router-link>

用户点击这个链接时，同样会触发 hash 值的改变，进而切换到关于页面。

与 History 模式对比

• URL 美观性：History 模式的 URL 更加简洁美观，符合传统的 URL 格式，没有 # 符号。而 hash 模式的 URL 中包含 # 符号，在一些人看来可能不够美观，尤其是对于需要对外展示的正式网址。
• 前进后退行为：两者在前进后退行为上表现相似，都可以通过浏览器的按钮进行导航。但在某些特殊情况下，History 模式可以通过 pushState 和 replaceState 方法更灵活地操作历史记录栈，而 hash 模式主要依赖浏览器对 hash 变化的默认历史记录管理。
• SEO 友好性：History 模式对 SEO 更友好，因为搜索引擎可以更好地识别和抓取没有 # 符号的 URL。而 hash 模式下，搜索引擎可能无法正确处理 # 后面的内容，导致页面内容难以被完整索引。不过，通过一些技术手段，如服务器端渲染（SSR）或预渲染，可以提高 hash 模式下页面的 SEO 效果。

在实际应用中，选择 hash 模式还是 History 模式取决于项目的具体需求和环境。如果项目对兼容性要求较高、不需要考虑 SEO 或者希望快速搭建一个简单的单页面应用，hash 模式是一个不错的选择；如果项目对 URL 美观性、SEO 有较高要求，并且能够保证服务器端的配置支持，那么 History 模式可能更合适。