Vue 中 vue 的路由模式及区别？

在 Vue Router 中，有两种常见的路由模式：哈希模式（Hash Mode）和历史模式（History Mode）。它们在 URL 的展现形式和与浏览器历史记录的交互方式上有所不同。

哈希模式（Hash Mode）

哈希模式是 Vue Router 默认的路由模式。在哈希模式下，URL 中的 # 符号被用作路由地址和其他部分的分隔符。

示例：

http://example.com/#/home

特点：

• URL 中以 # 分隔，# 后面的部分被视为路由路径。
• 适用于不支持 HTML5 History API 的旧版浏览器。
• 不会向服务器发送请求，所有路由都是基于客户端的。

历史模式（History Mode）

历史模式通过使用 HTML5 History API 来管理路由。它使用浏览器的 history.pushState 和 history.replaceState 方法来实现路由导航。

示例：

http://example.com/home

特点：

• URL 是真实的路径，没有 # 符号。
• 使用了 HTML5 History API，可以使用 history.back() 和 history.forward() 进行前进和后退。
• 需要后端支持，在服务器端需要进行配置以处理路由请求，避免在刷新页面时出现 404 错误。

区别：

1. URL 格式：哈希模式的 URL 中包含 #，而历史模式的 URL 是真实的路径。
2. 浏览器兼容性：哈希模式兼容性更好，适用于不支持 HTML5 History API 的旧版浏览器。历史模式在较新的浏览器中可以更自然地展示路径。
3. 与服务器交互：哈希模式不向服务器发送请求，所有路由切换都是在客户端完成的。历史模式需要后端配置，以便在服务器端正确处理路由请求。
4. 前进和后退：历史模式可以使用浏览器的前进和后退按钮，而哈希模式不会触发浏览器的历史记录变化。

选择使用哪种模式通常取决于项目的需求和服务器环境，哈希模式适用于简单的项目或不需要与服务器交互的情况，而历史模式适用于需要更自然 URL 形式以及需要与服务器交互的场景。

Was this helpful?

YesNo

0 / 0