写在前面
提到 Router 路由,相信大家都不陌生,不管是在 Vue 还是 React 框架中,都有使用到。
但是在使用的时候有两种模式 hash 和 history,不知道大家有没有思考过这两者的区别以及底层实现原理,那今天就借这道面试题,我们来好好的聊聊,就以 Vue Router 为例。
Hash 模式
Hash 模式是通过监听 URL 中的 hash 值( #
及其后面的部分)来实现路由切换和组件渲染的。
例如:
http://example.com/#/home // 显示首页
http://example.com/#/about // 显示关于我们页面
- 使用 URL 的 hash 部分来模拟路由的路径。
- Hash 值的改变不会导致浏览器发送新的请求到服务器。
- Hash 模式不需要服务端做任何配置。
优点:
- 兼容性好,支持所有浏览器,包括不支持 HTML5 History API 的老旧浏览器。
- 服务端无需做特殊配置。
缺点:
- URL 中有
#
号,不太美观。 - 部分老旧的浏览器可能会有效率问题。
Hash模式路由实现原理
在 hash 模式下,路由的实现主要依赖于 URL 的 hash 部分(即#
后面的部分)。
1. URL结构
当 URL 的 hash 部分改变时,页面不会重新加载,而是触发一个 hashchange 事件。
http://example.com/#/home // 显示首页
http://example.com/#/about // 显示关于我们页面
2. 监听hashchange事件
在 Vue Router 中,会监听浏览器的 hashchange 事件。当 hash 值发生变化时,Vue Router会获取新的hash值,并与定义的路由规则进行匹配,找到对应的组件进行渲染。
window.addEventListener('hashchange', function() {
var hash = window.location.hash.substring(1); // 获取当前的 hash 值,去掉开头的 '#'
if (hash === 'home') {
// 显示首页内容
} else if (hash === 'about') {
// 显示关于页面内容
}
});
History 模式
History 模式利用 HTML5 History API 中的 pushState 和 replaceState 方法来实现 URL 的导航,无需 # 号。
例如:
http://example.com/home // 显示首页
http://example.com/about // 显示关于我们页面
- 使用标准的 URL 路径来模拟路由的路径。
- 导航时,浏览器不会重新请求该 URL,只会更新浏览器的历史记录和显示当前 URL。
优点:
- 更加美观,看起来像标准的网站链接。
- 符合 HTML5 标准,支持浏览器的前进/后退按钮。
缺点:
- 部分老旧的浏览器不支持 HTML5 History API,需要使用垫片库(Polyfill)来支持。
- 需要在服务端做特殊配置,确保所有的 URL 都能找到应用入口文件(例如 index.html),否则会出现 404 错误。
History模式路由实现原理
在history模式下,路由的实现主要依赖于HTML5的History API。
1. URL结构
history 模式的 URL 看起来更加干净,没有 hash 符号。
http://example.com/home // 显示首页
http://example.com/about // 显示关于我们页面
2. 监听popstate事件
对于history模式的路由实现原理,可以使用 HTML5 History API 中的 pushState 和 replaceState 方法来实现。当用户点击链接或执行前进/后退操作时,可以通过这些方法改变浏览器的历史记录,同时不会向服务器发送请求。
// 添加路由
history.pushState({ page: 'about' }, 'About', '/about');
// 替换当前路由
history.replaceState({ page: 'contact' }, 'Contact', '/contact');
// 监听路由变化
window.addEventListener('popstate', function(event) {
var state = event.state;
if (state.page === 'about') {
// 显示关于页面内容
} else if (state.page === 'contact') {
// 显示联系页面内容
}
});
需要注意的是,在使用 history 模式时,我们需要在服务端配置一个单页应用的入口文件(例如 index.html
),并将所有不匹配静态文件的路由都指向这个入口文件。否则,当用户直接访问 http://example.com/about
时,服务端会返回 404 错误。
总结
总的来说,无论是 Hash 模式还是 History 模式,Vue Router 都是通过监听相应的事件,并在事件发生时执行路由切换逻辑,从而实现单页面应用的 URL 导航。两种模式的主要区别在于监听的事件不同,以及 History 模式需要服务端配置支持。