我要评论写在前面
提到 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 模式需要服务端配置支持。
发表评论