hash模式和history模式在Vue-router 中有什么区别

Vue-router 是 Vue.js 的官方路由插件，它能够让我们快速构建单页面应用程序（SPA）。在 Vue-router 中，有两种基本的路由模式：hash 模式和 history 模式。本文将围绕这两种模式展开，探究它们之间存在的区别以及使用场景。

1. hash 模式

在使用 Vue-router 的默认模式时，即 hash 模式时，我们会发现浏览器的地址栏中出现 # 号，例如：http://localhost:3000/#/home。# 号后面的内容是路由地址，和传统的 URL 地址不同。# 号导致浏览器不会向服务器发送请求，因此页面只要不刷新，# 后面的内容就一直存在。这种模式的好处是可以在不刷新页面的情况下进行路由跳转，比较适合于开发单页面应用程序。

hash 模式的实现原理是利用了浏览器的 hashchange 事件。当 URL 中的 # 发生变化时，浏览器便会触发 hashchange 事件，我们可以在路由组件中监听该事件，从而实现路由的更新。同时，Vue-router 还提供了一些 API，如this.$route.push()和this.$router.replace()，使我们可以在代码中进行路由的导航。

2. history 模式

相对于 hash 模式，history 模式在浏览器地址栏中显示的是传统的 URL 地址，例如：http://localhost:3000/home。这种模式使用 HTML5 的 History API 来管理浏览历史记录，可以在不刷新页面的情况下更新 URL 地址。

与 hash 模式不同，history 模式需要后端配合实现。因为浏览器向服务器发送请求时，会将 URL 地址作为参数传递过去。如果这个请求的路径不存在，服务器会返回 404 错误。因此在使用 history 模式时，需要在服务器端配置一个通配符路由，使所有的 URL 都返回同一个 HTML 页面，让前端路由接管页面的展示。

3. 区别

（1）URL 显示方式

在浏览器地址栏中，hash 模式的 URL 地址是以 # 号开头，例如：http://localhost:3000/#/home；而 history 模式的 URL 地址则是传统的 URL 地址，例如：http://localhost:3000/home。

（2）浏览器处理方式

在 hash 模式下，浏览器不会向服务器发送请求，因此当 URL 发生变化时，页面不会刷新，路由跳转也不会导致页面的刷新。而在 history 模式下，当 URL 发生变化时，浏览器会向服务器发送请求，服务器会根据请求返回相应的页面，这种方式会导致页面的刷新。

（3）后端支持

在 hash 模式下，前端可以独立地实现路由跳转，不需要后端的配合。而在 history 模式下，由于浏览器会向服务器发送请求，因此需要后端的支持，后端需要配置一个通配符路由，使所有的 URL 都返回同一个 HTML 页面，让前端路由接管页面的展示。

4. 使用场景

在实际开发中，需要根据项目的需要选择恰当的路由模式。

如果项目是一个单页面应用程序，所有的页面都是由前端控制渲染，并且不需要考虑 SEO 优化等问题的话，我们可以选择 hash 模式，这种方式能够让我们在不刷新页面的情况下进行路由跳转，提高用户体验。

如果项目是一个多页面应用程序，需要考虑 SEO 优化等问题的话，我们可以选择 history 模式来实现路由。但是需要注意的是，使用 history 模式要求后端服务器支持，否则会导致路由无法正常工作。

综上所述，不同的项目需要选择不同的路由模式。当然，Vue-router 还提供了一个 fallback 选项，当用户的浏览器不支持 HTML5 的 History API 时，可以自动切换到 hash 模式，从而确保路由的正常工作。