Vue Router 路由hash和history模式

在 Vue 中，路由的两种主要模式是 hash 和 history，默认的路由模式是hash模式。。这两种模式决定了 URL 的外观以及浏览器如何处理 URL 的变化。

---

hash和history模式区别

特性	Hash 模式	History 模式
URL 表现形式	URL 中带有 # 符号，如 http://example.com/#/about	URL 看起来更干净，没有 # 符号，如 http://example.com/about
服务器配置	不需要特殊的服务器配置	需要服务器配置以支持客户端路由，返回 index.html
兼容性	所有现代浏览器都支持	大多数现代浏览器都支持，但在一些较旧的浏览器或特殊环境中可能不支持
美观度	URL 中带有 # 符号可能看起来不太美观	URL 看起来更干净，没有额外的符号
SEO	# 后面的内容不会被搜索引擎视为页面的一部分	与常规页面一样，可以被搜索引擎索引
书签	书签中的 URL 会包含 # 符号	书签中的 URL 更简洁
刷新页面	刷新页面时，通常能够保持当前路由状态	如果没有正确的服务器配置，刷新页面可能会返回 404 错误
浏览器前进/后退按钮	正常工作	正常工作
配置方式	Vue Router 默认使用 Hash 模式	需要在创建 Vue Router 实例时明确指定 mode: 'history'

---

Hash 模式

hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端完全没有影响。所以改变hash值，不会重新加载页面。这种模式的浏览器支持度很好，低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由，已经成为SPA（单页面应用）的标配。

特点：

• URL 中会带有一个 # 号，例如 http://example.com/#/home
• 浏览器不会将带有 # 及其后面的部分发送到服务器请求资源
• 仅改变 # 后面的部分，不会重新加载页面
• 兼容性较好，所有现代浏览器都支持

切换到hash模式：

• Vue2.x中：

  const router = new VueRouter({mode: 'hash',routes
  })
  

• Vue3.x中：

  const router = createRouter({history: createWebHashHistory(),routes
  });
  

hash模式的主要原理就是onhashchange()事件：

window.onhashchange = function(event){console.log(event.oldURL, event.newURL);let hash = location.hash.slice(1);
}

使用onhashchange()事件的好处就是，在页面的hash值发生变化时，无需向后端发起请求，window就可以监听事件的改变，并按规则加载相应的代码。

除此之外，hash值变化对应的URL都会被浏览器记录下来，这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器，但是页面的hash值和对应的URL关联起来了。

---

History 模式

history模式的URL中没有#，它使用的是传统的路由分发模式，即用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。

虽然history模式丢弃了丑陋的#。但是，它也有自己的缺点，就是在刷新页面的时候，如果没有相应的路由或资源，就会刷出404来。

特点：

• URL 看起来更加“干净”，没有 # 号，例如 http://example.com/home
• 浏览器会将 URL 的变化当作一个普通的页面跳转，可能会向后端服务器发起请求
• 需要后端进行配置，以便对所有路由都返回同一个页面（通常是 index.html），否则就会404
• 兼容性相对较差，IE9 以下不支持

切换到history模式：

• Vue2.x中：

  const router = new VueRouter({mode: 'history',routes: [...]
  })
  

• Vue3.x中：

  const router = createRouter({history: createWebHistory(),routes
  });
  

后端配置：

当使用 history 模式时，需要确保后端服务器对所有路由都返回同一个页面（通常是 index.html）。
以下是一个 Nginx 的配置示例：

location / {  try_files $uri $uri/ /index.html;  
}

这个配置告诉 Nginx，如果请求的文件或目录不存在（$uri 和 $uri/ 都不匹配），就返回 index.html。
这样，无论用户访问哪个 URL，都会返回 Vue 应用的入口文件，然后由 Vue Router 接管后续的路由处理。