当前位置： 首页>后端>正文

vue-router 路由模式有几种？

后端2024-04-22 13:07:57

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 配置项来选择使用哪种路由模式。例如：

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 模式适用于非浏览器环境，不涉及浏览器行为。


https://www.xamrdz.com/backend/3g21926958.html

相关文章：