Vue 路由原理详解 - History API 和 Hash 模式

Vue 路由的原理基于浏览器的 History API 和 Hash（#）模式。

在 History API 中，浏览器提供了 pushState 和 replaceState 两个方法，可以在不刷新页面的情况下改变浏览器的 URL，并且可以保存在浏览器的历史记录中。Vue 路由利用这一特性，通过监听浏览器的 popstate 事件，来实现路由的切换。

在 Hash 模式中，浏览器的 URL 中以 # 开头的部分称为 hash，它不会被包括在 HTTP 请求中，因此对服务器端完全无意义，只用于浏览器端。Vue 路由也可以利用 hash 来实现路由的切换。

Vue 路由使用了一个 Router 对象，它包含了所有路由的配置信息，包括路由的路径、组件、参数等等。在使用 Vue Router 时，我们需要定义一个路由表，将路径和组件相对应。当使用者访问某个路径时，Vue Router 会根据路由表中的配置来找到对应的组件，并将其渲染到页面上。同时，Vue Router 还提供了一些导航守卫钩子函数，可以在路由跳转前后进行拦截和操作。

总结来说，Vue 路由的原理是利用浏览器的 History API 和 Hash 模式，通过路由表和 Router 对象来实现页面的跳转和渲染。