vue-router 路由模式有几种?

2023-09-03 08:13:54 浏览数 (2)

Vue Router 提供了三种路由模式:

1:Hash 模式(默认):

在 URL 中使用带有 # 符号的哈希值来管理路由。例如:http://xxxx.com/#/path。 在 Hash 模式下,当 URL 的哈希值发生变化时,浏览器不会向服务器发送请求,而是通过监听 hashchange 事件来进行路由导航。

2:History 模式:

使用 HTML5 的 History API 来管理路由。这种模式下,URL 不再需要使用哈希值,而是直接使用正常的 URL 地址。例如:http://xxxx.com/path。 在 History 模式下,当 URL 发生变化时,浏览器会向服务器发送请求,服务器需要配置相应的路由规则,以确保在刷新页面或直接访问 URL 时能正确响应路由。

3:Abstract 模式:

这种模式主要用于非浏览器环境,比如在服务器端渲染(Server-Side Rendering)时使用。 在 Abstract 模式下,Vue Router 不会对 URL 进行任何处理,而是将路由信息保存在内存中,通过编程方式进行路由导航。

可以通过创建 Vue Router 实例时的 mode 配置项来选择使用哪种路由模式。例如:

代码语言:javascript复制
const router = new VueRouter({
  mode: 'history', // 使用 History 模式
  routes: [...]
})

在使用 History 模式时,需要服务器配置来支持路由的正常工作。具体配置方法可以参考 Vue Router 官方文档或相关的服务器配置指南。

Vue Router 的路由模式有什么区别?

Vue Router 的不同路由模式(Hash 模式、History 模式和 Abstract 模式)之间有以下区别:

1:URL 格式:
  • Hash 模式:URL 中带有 # 符号和哈希值,例如 http://xxxx.com/#/path。
  • History 模式:URL 没有 # 符号,直接使用正常的 URL 地址,例如 http://xxxx.com/path。
  • Abstract 模式:不进行 URL 处理,路由信息保存在内存中,适用于非浏览器环境。
2:浏览器行为:
  • Hash 模式:URL 的哈希值发生变化时,浏览器会触发 hashchange 事件,Vue Router 监听该事件来进行路由导航,不会向服务器发送请求。
  • History 模式:URL 发生变化时,浏览器会向服务器发送请求,服务器需要配置相应的路由规则来正确响应路由。
  • Abstract 模式:不涉及浏览器行为,路由信息保存在内存中,适用于非浏览器环境。
3:刷新页面:
  • Hash 模式:刷新页面时,URL 中的哈希值不会被发送到服务器,仍然停留在前端,因此前端能够通过哈希值来恢复应用的状态。
  • History 模式:刷新页面时,URL 将被发送到服务器,服务器需要配置相应的路由规则来正确响应路由,否则会导致 404 错误。
  • Abstract 模式:不涉及浏览器行为,无论如何刷新页面都不会发送请求到服务器。
4:服务器配置:
  • Hash 模式:不需要特殊的服务器配置,因为哈希值不会发送到服务器。
  • History 模式:需要服务器配置来支持路由的正常工作,主要是为了在刷新页面或直接访问 URL 时能正确响应路由。
  • Abstract 模式:不涉及服务器配置,适用于非浏览器环境。

选择使用哪种路由模式取决于项目的需求和环境。 Hash 模式简单易用,不需要服务器配置,但 URL 带有哈希值; History 模式去除了哈希值,更符合传统 URL 的形式,但需要服务器配置支持; Abstract 模式适用于非浏览器环境,不涉及浏览器行为。

0 人点赞