从入门到精通——10 分钟速成手写 Vue Router

前言

在现代前端开发中，单页应用（SPA）逐渐成为主流，而实现 SPA 的关键技术之一便是路由。本文将带你亲手编写一个简易的前端路由库——Vue Router，旨在帮助你深入理解路由原理及其实现。

正文

第一分钟：了解基本概念

要理解 Vue Router，首先需要了解几个基本概念。

• 路由：定义应用中不同页面或组件之间的转换规则。
• 路径：用户在浏览器地址栏中输入的 URL，用于访问不同页面或组件。
• 组件：构成应用界面的基本模块，负责渲染内容和处理交互。
• 视图：渲染组件的 HTML 片段，通常由组件负责生成。

第二分钟：剖析 Vue Router 原理

Vue Router 内部有两种模式：Hash 模式和 History 模式。

• Hash 模式：通过在 URL 中添加 # 符号及其后的哈希值来改变页面，不会向服务器发送请求，因此不会刷新页面。
• History 模式：利用 HTML5 history API 来改变页面，通过修改浏览器历史记录来实现路由跳转，会向服务器发送请求，并刷新页面。

第三分钟：动手搭建基础框架

现在，让我们开始动手构建我们的路由库。首先，创建一个 Router 类，并为其添加两个属性：routes 和 currentRoute。routes 用于存储路由配置，而 currentRoute 则指向当前激活的路由。

第四分钟：定义路由配置

路由配置是一组对象，其中每个对象包含以下属性：

• path：定义路由的路径。
• component：指定与该路由关联的组件。
• name：给路由取一个名称，以便在代码中引用。

第五分钟：实现路由匹配

当用户访问某个页面时，需要确定与之匹配的路由。我们可以遍历路由配置，逐一检查每个路由的 path 属性，看看它是否与当前 URL 路径匹配。

第六分钟：更新视图

匹配到路由后，我们需要更新视图，即渲染与该路由关联的组件。可以通过调用组件的 render 方法，并将渲染结果插入到 DOM 中来实现。

第七分钟：添加导航功能

为了方便用户在不同页面之间切换，我们需要添加导航功能。我们可以监听浏览器的 popstate 事件，当用户点击浏览器的后退或前进按钮时，会触发该事件。在事件处理函数中，我们可以更新路由并渲染相应组件。

第八分钟：完善 Hash 模式

Hash 模式下，URL 中会添加 # 符号及其后的哈希值来表示当前页面。我们需要监听 hashchange 事件，当哈希值发生变化时，更新路由并渲染相应组件。

第九分钟：实现 History 模式

History 模式下，URL 中不会添加 # 符号及其后的哈希值，而是通过修改浏览器历史记录来实现路由跳转。我们需要监听浏览器的 popstate 事件，当浏览器历史记录发生变化时，更新路由并渲染相应组件。

第十分钟：收尾工作

至此，一个简易的前端路由库已经构建完成。当然，这只是最基础的实现，实际应用中可能还需要考虑更多细节和功能，如嵌套路由、参数传递等。但这些基本原理一通，百通，相信你已经掌握了手写 Vue Router 的精髓。

结语

通过本文的学习，相信你已经对 Vue Router 有了更深入的理解，也对前端路由的实现原理有了基本的认识。希望你能将这些知识应用到自己的项目中，打造更加丰富的单页应用。