Vue Router有几种路由模式？

Vue Router主要提供两种核心的路由模式，用于管理浏览器URL与Vue应用视图之间的映射关系。它们分别是hash模式和history模式，此外还有一种特殊的abstract模式用于非浏览器环境。模式的选择直接影响URL的表现形式和服务器的配置要求。

Hash模式：利用URL片段标识符

Hash模式是Vue Router的默认模式。它使用URL中#符号后面的部分（即hash）来模拟一个完整的URL，而不会在页面跳转时向服务器发起请求。

import { createRouter, createWebHashHistory } from 'vue-router';
const router = createRouter({
  history: createWebHashHistory(),
  routes: [...]
});

其URL看起来像这样：http://example.com/#/user/profile。当hash变化时，浏览器会触发hashchange事件，Vue Router据此来更新视图。由于#后面的部分不会被发送到服务器，因此无需特殊的服务器配置，兼容性极好。这是它在早期单页应用中被广泛使用的原因。

History模式：模拟标准URL路径

History模式利用HTML5 History API（pushState、replaceState）来实现干净的URL，没有#符号。

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});

其URL看起来像传统的服务端路由：http://example.com/user/profile。这更美观，对SEO也更友好。然而，它有一个关键要求：必须配置你的服务器。

因为当用户直接在浏览器中输入这个URL或刷新页面时，浏览器会向服务器请求/user/profile这个路径。如果服务器没有针对这个路径的对应资源（实际上资源只在你的Vue应用入口index.html中），就会返回404错误。因此，你需要在服务器端配置一个“回退路由”，将所有非静态文件的请求都重定向到index.html，由前端路由接管。

Abstract模式：非浏览器环境

abstract模式用于没有浏览器环境的情况，例如Node.js（服务端渲染SSR）或移动端原生应用（如Weex、NativeScript-Vue）。在这种模式下，路由会维护一个内部的栈，不依赖浏览器的URL。

import { createRouter, createMemoryHistory } from 'vue-router';
const router = createRouter({
  history: createMemoryHistory(),
  routes: [...]
});

它适用于需要路由功能但与浏览器URL无关的场景。

如何选择？

• 如果你的应用是一个纯静态站点，部署在无法配置服务器的静态托管服务上，或者需要支持旧浏览器，使用Hash模式。
• 如果你的应用部署在可以配置的Web服务器（如Nginx、Apache、Node.js）上，并且希望URL干净，使用History模式并务必正确配置服务器回退。
• 如果你在做服务端渲染或原生应用，使用Abstract模式（通过createMemoryHistory）。

现代应用通常首选History模式，因为它提供了更专业的用户体验，而服务器配置已成为标准实践。