50+Vue经典面试题源码级详解（47）：History模式和Hash模式有何区别？

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

前言

小伙伴们好，这是村长《Vue经典面试题源码级详解》系列文章第 47 题，前面已完成题目合集在此： 历时一个月，2.6W字！50+Vue经典面试题源码级详解，你值得收藏！

学习群

我组织了一个面试学习群，关注村长公众号村长学前端，回复“加群”，大家一起卷~

相关学习资源

本系列有配套视频，思维导图和开源项目，大家学习同时千万不要忘了三连 + 关注 + 分享，有道是喝水不忘挖井人~

• 视频教程：56道经典Vue面试题详解
• 思维导图：Vue面试专题
• 配套代码：vue-interview

History模式和Hash模式有何区别？

分析

vue-router有3个模式，其中两个更为常用，那便是history和hash。

两者差别主要在显示形式和部署上。

---

体验

vue-router4.x中设置模式已经变化：

const router = createRouter({
  history: createWebHashHistory(), // hash模式
  history: createWebHistory(),     // history模式
})

用起来一模一样

<router-link to="/about">Go to About</router-link>

区别只在url形式

// hash
// 浏览器里的形态：http://xx.com/#/about
// history
// 浏览器里的形态：http://xx.com/about

思路

• 区别
• 详细阐述
• 实现

---

回答范例

• vue-router有3个模式，其中history和hash更为常用。两者差别主要在显示形式、seo和部署上。
• hash模式在地址栏显示的时候是已哈希的形式：#/xxx，这种方式使用和部署简单，但是不会被搜索引擎处理，seo有问题；history模式则建议用在大部分web项目上，但是它要求应用在部署时做特殊配置，服务器需要做回退处理，否则会出现刷新页面404的问题。
• 底层实现上其实hash是一种特殊的history实现。

---

知其所以然

hash是一种特殊的history实现：

github1s.com/vuejs/route…