路由

前端路由是指通过在前端应用程序中使用 JavaScript 实现页面之间的导航和路由功能。它可以让用户在不刷新整个页面的情况下，只改变 URL 和显示内容的方式来浏览不同的页面或视图。常见的前端路由库包括 React Router、Vue Router 等。

原理

基于浏览器提供的历史记录 API（history API）和 URL hash（#）机制。

history：前端路由可以监听浏览器的导航事件，例如页面跳转、后退、前进等。在这些事件发生时，前端路由可以通过 JavaScript 修改 URL 并根据不同的 URL 渲染不同的内容。

js

// 将浏览器的 URL 更新为 https://example.com/home，并在浏览器的历史记录中添加一条新的记录
history.pushState({ page: 'home' }, 'Home', '/home')

// 更新为 https://example.com/home，并将当前的历史记录条目替换
history.replaceState({ page: 'home' }, 'Home', '/home')

// 执行前进、后退或者手动修改 URL 时，就会触发 popstate 事件
window.addEventListener('popstate', function (event) {
  // 处理历史记录变化的操作
})

hash：将路由信息存储在 URL 的#后面。例如，URL 为 https://example.com/#/home，则表示当前页面是/home。当用户点击页面链接或者进行前进/后退操作时，前端路由可以通过监听 window 对象的 hashchange 事件来动态改变页面内容。
js
```
// 更新为 https://example.com/#/home，并触发 hashchange 事件。
location.hash = '#/home'

window.addEventListener('hashchange', function (event) {
  // 处理 URL hash 变化的操作
})
```

导航守卫

Vue-Router 中的导航守卫分为以下三种：

全局导航守卫：全局导航守卫包括 beforeEach、beforeResolve 和 afterEach，它们是针对整个路由的跳转过程的，可以用来进行全局的路由跳转控制。
路由独享守卫：路由独享守卫是指在单个路由配置中定义的 beforeEnter 守卫，它只对当前路由起作用，可以用来进行路由特定的守卫操作，例如路由参数的校验等。
组件路由守卫：组件路由守卫是指在组件内部定义的 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 守卫，它们是与组件绑定的，可以用来进行组件特定的路由守卫操作，例如在组件加载时进行数据的加载等。

导航解析流程

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。