Vue面试题45：history模式和hash模式有何区别？（总结自B站up主‘前端杨村长’视频，仅供自用学习）

分析

• vue-router有3个模式，其中两个更为常用，那便是history和hash；两者差别主要在显示形式和部署上；

体验

• vue-router4.x中设置模式的 方式已经改变

const router=createRouter({
	history: createWebHashHistory()  //hash模式
	history: createWebHistory()  //history模式
	history: createMemoryHistory()  //memory模式
})
//三者使用起来是一样的
<router-link to="/about"></router-link>

思路

• 总述两者区别;
• 详细阐述使用细节;
• 实现方式;

回答范例

• vue-router有3个模式，其中history和hash更为常用。两者差别主要在显示形式和部署上；

• hash模式在地址栏显示的时候是以哈希的形式显示：#/xxx，这种方式使用和部署都比较简单；history模式url看起来更优雅美观，但是应用在部署时需要做特殊配置，web服务器需要做回退处理，否则会出现刷新页面404的问题；

• 在实现上不管哪种模式，最终都是通过监听popstate事件触发路由跳转处理，url显示不同只是显示效果上的差异；

history模式nginx配置

server{
	listen 80;
	server_name xxx.com;
	
	location/admin{
		root/Users/abc/www/admin;
		index index.html;
		try_files $uri $uri/ /admin/index.html;
	}
}