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;
  	}
  }