Vue.js 路由跳转过程探秘（下）
2024-02-01 11:24:19
从上篇文章中，我们了解到 Vue Router 是 Vue.js 应用中必不可少的一部分，它负责处理单页面应用中的路由跳转。本文将继续深入探讨 Vue Router 路由跳转的内部机制，以实际跳转为例，详细分析 transitionTo 函数、$route 对象、组件生命周期函数在整个跳转过程中所扮演的角色。
首先，当我们在页面上点击 to-child 时，会触发点击事件，从而调用 HashHistory 的 push 方法，将新的路由地址压入浏览器历史记录栈。HashHistory 是 Vue Router 中默认使用的路由模式，它利用浏览器提供的 hashchange 事件来监听 URL 的变化。
接着，transitionTo 函数就会被调用，它负责执行路由跳转的具体逻辑。transitionTo 函数首先会检查目标路由是否合法，如果合法，它会将新的路由信息保存到 route 对象中。route 对象是一个全局对象，它包含了当前路由的信息，如 path、query 等。
transitionTo 函数还会调用组件的生命周期钩子函数，以便组件能够在路由跳转过程中执行必要的操作。例如，在组件被销毁之前，Vue Router 会调用 beforeDestroy 钩子函数，以便组件能够在销毁前完成必要的清理工作。
在路由跳转过程中，route 对象会发生变化，以反映当前路由的信息。组件可以通过监视 route 对象的变化来响应路由跳转事件。例如，组件可以通过 watch 选项来监听 $route 对象的变化，并在变化发生时执行相应的操作。
通过剖析 Vue Router 路由跳转的内部细节，我们对这一强大的前端框架有了更深入的了解。掌握这些知识，我们就能更好地使用 Vue Router 来构建单页面应用，并为用户提供流畅的导航体验。
示例：从 http://localhost:8080/#/foo 跳转到 http://localhost:8080/#/foo/child/10000
让我们以实际跳转为例，具体看看 transitionTo 函数、$route 对象、组件生命周期函数在整个跳转过程中是如何工作的。
- 当我们点击页面上的 to-child 时，会触发点击事件，从而调用 HashHistory 的 push 方法，将新的路由地址压入浏览器历史记录栈。
- 浏览器检测到 URL 发生变化，触发 hashchange 事件。
- Vue Router 监听 hashchange 事件，并调用 transitionTo 函数。
- transitionTo 函数检查目标路由是否合法，如果合法，它会将新的路由信息保存到 $route 对象中。
- transitionTo 函数调用组件的生命周期钩子函数，以便组件能够在路由跳转过程中执行必要的操作。
- 组件被销毁，Vue Router 调用 beforeDestroy 钩子函数，以便组件能够在销毁前完成必要的清理工作。
- 新的组件被创建，Vue Router 调用 created 和 mounted 钩子函数，以便组件能够初始化和挂载。
- 路由跳转完成，用户看到新的页面。
通过这个示例，我们可以清楚地看到 transitionTo 函数、$route 对象、组件生命周期函数在 Vue Router 路由跳转过程中是如何协同工作的。
