Vue Router 路由hash和history模式

hash和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 接管后续的路由处理。