自定义Vue Router：从零实现简单前端导航

在本篇文章中，我们将深入探讨如何实现一个简单的 Vue Router，结合 Hash 路由，以 Vue 2.x 版本为例。首先，回顾一下前端路由的基本概念，前端路由主要分为两种方式：基于 URL哈希（Hash Router）和基于浏览器历史记录（History Router）。文章之前已经介绍过这两种实现方法，并且展示了如何用它们创建基本的前端路由实例。 接下来，我们将主要关注 Hash Router，并利用 Vue 的单文件组件(SFC)结构来构建自定义的路由解决方案。Vue Router 的核心组件包括 `router-link` 和 `router-view`。`router-link` 是用于导航到特定路由的链接，而 `router-view` 则负责动态渲染匹配当前路由的组件。 在代码示例中，我们看到： 1. HTML 部分： - `<router-link>` 标签用于导航，它接受一个 `to` 属性，指定路由路径。例如，`<router-link to="/">home</router-link>` 表示链接到根路径（"/"）的 Home 组件。 - `<router-view>` 是动态组件容器，根据当前的路由匹配渲染不同的组件。 2. JavaScript 部分： - 自定义组件 Home、Book 和 Movie，每个组件对应一个路由路径。 - `routes` 数组定义了路由规则，包含了每个路径及其关联的组件。 - 使用 Vue Router 构造函数创建一个新的 Vue Router 实例，传递 Vue 实例作为参数，而非直接注入到根实例中。 实现 Vue Router 的关键步骤包括： - 监听浏览器的 `hashchange` 事件，监听 URL 变化以触发路由切换。 - 创建一个路由映射表，存储路由路径和对应的组件实例。 - 在路由切换时，根据当前的 hash URL，从映射表中获取相应的组件实例并将其渲染到 `router-view` 中。 - 为了实现响应式，每次路由改变时，都会触发新的 Vue 实例的重新渲染，确保 `router-view` 内容实时更新。 在实际的源码实现中，Vue Router 会处理更复杂的情况，比如参数传递、路由守卫、路由命名空间等高级功能。然而，这个简化的版本足以帮助理解基础原理和核心组件的交互过程。理解了这些基础后，可以逐步探索 Vue Router 的其他特性，从而更好地在项目中运用这个强大的前端路由库。