Vue Router 路由hash和history模式

移动开发2024-05-08 18:23:41

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

特点：

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

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

特点：

切换到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 接管后续的路由处理。