【八股系列】vue-router的原理是什么?

三种路由模式：

1. hash

在浏览器环境下，Hash 模式是实现前端路由的一种简单方式。它利用 URL 中的 Hash （即 # 后面的部分）来实现路由，而不会导致浏览器对服务器的请求。

当 URL 中的 Hash 值发生变化时，浏览器不会向服务器发送请求，而是触发 hashchange 事件，JavaScript 代码可以通过监听该事件来更新页面。

Vue-Router 实现 Hash 模式的原理就是通过 window.location.hash 来监听 URL 中的 Hash 值的变化，然后通过路由映射表找到对应的组件，最后通过组件的渲染来更新页面。

2. history

在 HTML5 中，新增加了 History API，它提供了对浏览器历史记录的操作，使得浏览器在不刷新页面的情况下，也可以进行前进和后退操作。History API 包括 pushState 和 replaceState 两个方法，可以通过它们来添加和修改浏览器的历史记录。

Vue-Router 在 HTML5 环境下可以使用 History 模式，它通过调用 pushState 和 replaceState 方法来修改浏览器的历史记录，并且监听 popstate 事件来响应浏览器的前进和后退操作。

当用户点击浏览器的前进和后退按钮时，浏览器会触发 popstate 事件，Vue-Router 可以通过该事件来重新加载相应的组件，从而实现路由的切换。

3. Abstract

在非浏览器环境下，比如 Node.js 中，是没有浏览器的 API 的。为了让 Vue-Router 在这种环境下也能够工作，Vue-Router 提供了 Abstract 模式。

在 Abstract 模式下，Vue-Router 并不会改变浏览器的 URL，而是通过调用相应的函数来模拟路由的切换。例如，Vue-Router 可以通过调用 createMemoryHistory() 函数来创建一个内存中的路由历史记录，然后通过调用相应的方法来模拟路由的切换。