VueRouter的路由模式有三种：hash模式、history模式和abstract模式。

1：Hash 模式（默认）：

在URL中的路径部分以 # 符号开头。

比如：http://www.xxx.com/#/home。

在hash模式下，URL的hash部分的改变不会导致浏览器向服务器发送请求，可以通过监听hashchange事件来触发相应的路由变化。

2：History 模式：

通过使用HTML5的pushState和replaceState方法来改变URL，不再使用hash作为URL的一部分。

比如：http://www.xxx.com/home。

在history模式下，URL的改变会导致浏览器向服务器发送请求，因此需要服务器的支持来处理这些URL。

3：Abstract 模式：

在无法使用浏览器的history模式和hash模式时，可以选择使用abstract模式。在abstract模式下，只会改变应用的内存状态，并不会改变URL。这种模式适合于在非浏览器环境中使用VueRouter，比如在Node.js中渲染Vue应用。

路由配置

const router = new VueRouter({
  mode: 'history', // 使用 History 模式
  routes: [...]
})

### Vue Router 的路由模式有什么区别？

|区别|Hash 模式|History 模式|Abstract 模式|
|-|-|-|
|URL 格式|URL 中带有 # 符号和哈希值，例如 http://xxxx.com/#/path。|URL 没有 # 符号，直接使用正常的 URL 地址，例如 http://xxxx.com/path。|不进行 URL 处理，路由信息保存在内存中，适用于非浏览器环境。|
|浏览器行为|URL 的哈希值发生变化时，浏览器会触发 hashchange 事件，Vue Router 监听该事件来进行路由导航，不会向服务器发送请求。|URL 发生变化时，浏览器会向服务器发送请求，服务器需要配置相应的路由规则来正确响应路由。|不涉及浏览器行为，路由信息保存在内存中，适用于非浏览器环境。|
|刷新页面|刷新页面时，URL 中的哈希值不会被发送到服务器，仍然停留在前端，因此前端能够通过哈希值来恢复应用的状态。|刷新页面时，URL 将被发送到服务器，服务器需要配置相应的路由规则来正确响应路由，否则会导致 404 错误。|不涉及浏览器行为，无论如何刷新页面都不会发送请求到服务器。|
|服务器配置|不需要特殊的服务器配置，因为哈希值不会发送到服务器。|需要服务器配置来支持路由的正常工作，主要是为了在刷新页面或直接访问 URL 时能正确响应路由。|不涉及服务器配置，适用于非浏览器环境。|