Vue 中 hash 路由和 history 路由实现原理说一下？

在 Vue 中，Hash 路由和 History 路由是两种不同的路由模式，它们的实现原理和在浏览器中的表现有所不同。

Hash 路由（Hash mode）：

• Hash 路由使用 URL 中的 # 符号来模拟路由，例如：http://example.com/#/about。
• 实现原理是监听浏览器的 hashchange 事件，在 URL 中的哈希值改变时，根据新的哈希值来切换路由。
• 优点是兼容性好，可以在不支持 History API 的浏览器上运行，且部署简单。
• 缺点是 URL 中有 # 符号，不够美观，同时无法直接定位到页面中的锚点。

History 路由（History mode）：

• History 路由利用 HTML5 的 History API，通过修改浏览器的 History Stack 来实现路由切换，例如：http://example.com/about。
• 实现原理是使用 history.pushState() 方法或 history.replaceState() 方法，这些方法可以在不刷新页面的情况下修改浏览器的 URL。
• 优点是 URL 更加美观，没有 # 符号，更符合传统 URL 的形式，并且可以使用 history.back()、history.forward() 等方法控制路由历史。
• 缺点是需要服务器的配合，以便在非根路径下刷新页面时正确地定位到对应的路由。

在 Vue 中，通过 vue-router 来使用这两种路由模式，可以在路由器配置中选择使用哪种模式。例如：

const router = new VueRouter({
  mode: 'history', // 或 'hash'
  routes: [
    // 路由配置
  ]
})

选择使用 Hash 路由还是 History 路由，取决于你的项目需求和对美观性、兼容性的考量。 History 路由相对更优雅，但需要服务器的配合支持，并且在一些旧版本浏览器中可能不兼容。Hash 路由兼容性更好，部署简单，但 URL 不够美观。