前端经典面试题合集, Vue Router 路由有哪些模式?各模式有什么区别?

Step 1

Q:: Vue Router 路由有哪些模式？

A:: Vue Router 提供了三种模式：'hash' 模式、'history' 模式和 'abstract' 模式。

1. 'hash' 模式：使用 URL 的 hash (``#``) 来模拟一个完整的 URL，从而在不重新加载页面的情况下切换视图。这种模式简单易用，兼容性好，但 URL 中的 # 会显得不太美观。

2. 'history' 模式：利用 HTML5 History API (包括 pushState 和 replaceState 方法) 来实现 URL 跳转而不重新加载页面。这种模式使得 URL 看起来更干净，但需要服务器的支持，确保所有路由指向相同的 HTML 页面。

3. 'abstract' 模式：在没有浏览器的情况下 (如 Node.js 环境) 使用的模式，它不会改变 URL，仅仅是模拟导航行为，通常在测试或 SSR (服务器端渲染) 环境中使用。

Step 2

Q:: Vue Router 的' history' 模式有什么优缺点？

A:: 优点： 1. 使得 URL 看起来更简洁和美观。 2. 可以与浏览器的前进和后退功能无缝集成。

缺点： 1. 需要后端配置支持，以确保所有路由都指向同一个 HTML 文件。 2. 不兼容旧版本的浏览器，特别是 IE9 以下版本。

Step 3

Q:: 在什么场景下应该使用 Vue Router 的' hash' 模式？

A:: 如果项目对 SEO 要求不高，并且需要考虑到旧版浏览器的兼容性，或者项目较为简单，不希望涉及后端配置时，可以选择使用 'hash' 模式。