Vue Router——hash模式和 history模式

在 Vue.js 中,Vue Router 是官方提供的路由管理器,它允许你以单页面应用(SPA)的方式构建你的Vue应用。Vue

Router 支持两种路由模式:hash 模式和 history

模式。这两种模式的主要区别在于它们如何与浏览器的历史记录(History API)交互以及 URL 的形式。

Hash 模式

Hash 模式是 Vue Router 的默认模式。它使用 URL 的 hash(即 URL 中 # 后面的部分)来模拟一个完整的 URL,从而实现页面的跳转而无需重新加载页面。在 Hash 模式下,当 URL 改变时,页面不会重新加载。

Hash 模式的示例 URL:http://www.example.com/#/about

优点:

  • 兼容性好,可以在不支持 History API 的旧浏览器中使用。
  • 由于是基于锚点变化,不会向服务器发送请求获取新页面。

缺点:

  • URL 中会包含 #,对于某些需要 URL 干净的场景(如SEO)可能不是最佳选择。

History 模式

History 模式利用了 HTML5 的 History API 来实现页面的跳转而无需重新加载。这种模式允许你创建没有 hash 的正常 URL。

History 模式的示例 URL:http://www.example.com/about

优点:

  • URL 不含有 #,更加美观,对于需要 URL 干净的场景(如SEO)更加友好。

缺点:

  • 需要服务器端支持。因为在 History 模式下,如果用户直接访问或刷新非首页的 URL,服务器会收到一个路径请求,如果服务器没有被正确配置来匹配这个路径,就会返回 404 错误。因此,需要在服务器端添加一个回退处理,以便对所有的路径请求返回同一个 HTML 文件。
  • 不支持不支持 History API 的旧浏览器。

总结

选择哪种模式主要取决于你的需求以及目标浏览器的兼容性。如果你需要一个看起来更像传统网页的 URL 或者是在做SEO优化,History 模式可能是更好的选择,只要确保你的服务器配置能正确处理 SPA 的路由请求。如果你更关注兼容性或者不想额外配置服务器,那么 Hash 模式可能是更方便的选项。

相关推荐
行走的陀螺仪7 分钟前
Sass 详细指南
前端·css·rust·sass
爱吃土豆的马铃薯ㅤㅤㅤㅤㅤㅤㅤㅤㅤ12 分钟前
React 怎么区分导入的是组件还是函数,或者是对象
前端·react.js·前端框架
LYFlied25 分钟前
【每日算法】LeetCode 136. 只出现一次的数字
前端·算法·leetcode·面试·职场和发展
子春一226 分钟前
Flutter 2025 国际化与本地化工程体系:从多语言支持到文化适配,打造真正全球化的应用
前端·flutter
前端无涯27 分钟前
React/Vue 代理配置全攻略:Vite 与 Webpack 实战指南
vue.js·react.js
QT 小鲜肉41 分钟前
【Linux命令大全】001.文件管理之file命令(实操篇)
linux·运维·前端·网络·chrome·笔记
羽沢311 小时前
ECharts 学习
前端·学习·echarts
LYFlied1 小时前
WebAssembly (Wasm) 跨端方案深度解析
前端·职场和发展·wasm·跨端
七月丶2 小时前
实战复盘:我为什么把 TypeScript 写的 CLI 工具用 Rust 重写了一遍?
前端·后端·rust