Vue.js 中的路由主要通过 Vue Router 实现,它支持多种路由模式,其中最常用的两种是 hash 模式和 history 模式。这两种模式在 URL 结构、工作原理以及对服务器配置的要求上有所不同。
1.Hash 模式(默认模式)
URL 结构:
URL 中带有一个 # 符号,例如 http://example.com/#/about。
#符号及其后面的内容在 HTTP 请求中不会被发送到服务器,因此不会影响服务器端的路由处理。
工作原理:
Vue Router 通过监听浏览器地址栏中的 hash 变化来触发相应的路由处理。
当用户点击一个带有 hash 的链接时,浏览器会更新地址栏中的 URL,但不会重新加载页面。
Vue Router 监听到 hash 的变化后,会根据新的 hash 值来渲染对应的组件。
服务器配置:
因为 hash 部分不会被发送到服务器,所以服务器不需要做特殊处理,可以直接返回同一个 index.html 文件。
2. History 模式
URL 结构:
URL 中没有 # 符号,看起来更接近于传统的 URL,例如 http://example.com/about。
这种方式使用了 HTML5 的 History API 来实现 URL 的跳转和管理。
工作原理:
Vue Router 通过监听浏览器地址栏中的路径变化(而不是 hash 变化)来触发相应的路由处理。
当用户点击一个链接时,浏览器会更新地址栏中的 URL,并尝试加载新的页面。
但由于 Vue Router 拦截了这些请求,并通过 History API 进行了页面渲染,所以实际上页面并不会重新加载。
服务器配置:
因为路径变化会被发送到服务器,所以服务器需要配置为对所有路由请求都返回同一个 index.html 文件(或者对应的单页应用入口文件)。
如果服务器没有正确配置,当用户直接访问某个路由(如通过刷新页面或输入 URL)时,可能会收到 404 错误。
总结
Hash 模式:简单、兼容性好(不需要服务器配置),但 URL 中带有 # 符号,可能不太美观。
History 模式:URL 更美观,但需要服务器支持并正确配置。
选择哪种模式主要取决于你的应用需求和服务器配置能力。如果希望 URL 更简洁、更符合传统 URL 的习惯,可以选择 History 模式;如果希望更简单、不需要服务器配置,可以选择 Hash 模式。