【前端面经】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 模式。

在使用 Vue Router 时，我们需要根据项目的实际需求来选择路由模式。如果需要兼容较老的浏览器，或者是单页应用场景，可以选择 hash 模式；如果需要美观 URL，或者需要使用浏览器的前进和后退功能，可以选择 history 模式；如果需要在非浏览器环境下使用路由，可以选择 abstract 模式。

总结

除了路由模式，Vue Router 还提供了很多其他的功能，例如动态路由、路由嵌套、路由守卫等。在使用 Vue Router 时，我们需要根据实际需求来选择合适的功能，以便更好地完成项目的需求。

总之，Vue Router 提供了三种路由模式，每种模式都有其优劣和适用场景。我们需要根据项目的实际需求进行选择，以便实现最佳的路由效果。希望本文能对读者在使用 Vue Router 时进行选择提供帮助。