Vue.js 中路由提供 Hash 和 History 两种模式，各有优缺点。选择 Hash 路由适用于简单应用、调试和兼容所有浏览器，而选择 History 路由则适用于需要流畅体验、美观 URL 且有服务器端支持的应用。

Vue.js 中 Hash 和 History 路由

在 Vue.js 中，使用路由来管理应用程序中的页面导航。有两种主要类型的路由模式：Hash 和 History。

Hash 路由

• 优点：

  • 简单易用，无需服务器端配置。
  • URL 中带有 # 号，与 History 路由相比更易于调试。
  • 兼容所有浏览器，包括较旧的浏览器。

• 缺点：

  • URL 的外观不佳，带有 # 号。
  • 会导致页面重新加载，这可能会影响用户体验。
  • 无法使用浏览器的前进和后退按钮。

History 路由

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• 优点：

  • URL 外观更美观，没有 # 号。
  • 不会导致页面重新加载，提供了更流畅的用户体验。
  • 允许使用浏览器的前进和后退按钮。

• 缺点：

  • 需要服务器端支持，需要特殊配置。
  • 在一些较旧的浏览器中可能存在兼容性问题。

选择哪种路由模式？

• 选择 Hash 路由：

  • 对于简单的应用程序或调试目的。
  • 不需要服务器端支持。
  • 兼容所有浏览器。

• 选择 History 路由：

  • 对于需要流畅用户体验、美观 URL 的应用程序。
  • 有服务器端支持。
  • 在现代浏览器中兼容。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！