【前端面经】Vue-Vue Router 路由有哪些模式?各模式有什么区别?

Vue Router 路由模式详解

Vue Router 是一个轻量级的前端路由库，它提供了三种路由模式，每种模式都适用于不同的场景。本文将详细介绍这三种模式的优缺点和适用场景，以便读者在使用 Vue Router 时进行选择。

Hash 模式

在 hash 模式下，URL 中的 hash 值作为路由路径。该模式可以兼容较老的浏览器，并且无需后端服务器的支持。在使用 hash 模式时，我们可以实现单页应用的效果，从而提高页面的性能。但是，该模式的缺点是 URL 中会带有 # 号，可能不太友好，对于一些 URL 形式有要求的场景，不适用。在使用 hash 模式时，需要注意一些需要刷新页面的操作，例如在页面中使用锚点进行定位时，需要使用 JavaScript 来实现。

History 模式

在 history 模式下，URL 中的路径作为路由路径，不会带有 # 号。该模式的优点是 URL 美观，更符合一些场景的要求。此外，由于使用了 HTML5 中新增的 History API，可以实现前进和后退操作，提高用户体验。但是，该模式需要后端服务器的支持，而且需要正确地配置 URL 路径映射，否则会导致页面刷新时出现 404 错误。

Abstract 模式

在 abstract 模式下，路由器不会监听 URL 变化，而是通过调用路由器 API 进行导航。该模式的优点是可以在不需要浏览器 API 的情况下使用路由，比如在 Node.js 等非浏览器环境下。但是，由于需要手动管理路由的变化，使用起来比较麻烦，并且不适用于大多数场景。

模式之间的区别

三种路由模式的区别主要在于 URL 的形式和后端服务器的支持情况。对于需要兼容较老浏览器的场景，可以选择 hash 模式；对于需要美观 URL 的场景，可以选择 history 模式；如果需要在非浏览器环境下使用路由，可以选择 abstract 模式。