手写简易版 Hash 的 Vue.js 路由：从源码视角解读 Vue.js 路由

2024-01-26 05:47:23





**手写简易版 Hash 的 Vue.js 路由：从源码视角解读 Vue.js 路由** 

在当今繁荣昌盛的单页应用程序时代，路由扮演着至关重要的的角色，它允许我们在不刷新页 PAT的情况下在应用程序的不同部分中导航。

众所周知，Vue.js，这个简洁而灵活的前端JavaScript 牭架，为我们提供了开箱即用的路由牪件，大大简化了路由管理的复杂性。但仅仅满足于使用它所提供的 API 岂能彰显我们对它的热爱？

**踏上源 kó dì 代码之旅** 

为进一步提升对 Vue.js 路由的认知，踏上源码探索之旅是明智之举。我们不妨仿效 Vue.js 的路由，自己动手编写一个简易的 Hash 路由牭件，借此机会一睹其运作的奥秘。

**何为 Hash 路由？** 

Hash 路由是一种基于 URL 片段（即以 "#" 打头的部分）的路由形式。与传统路由（以 "/" 打头）相比，Hash 路由无需服务器参与，仅在浏览器内部进行。

**简易 Hash 路由的核心思想** 

我们的 Hash 路由将包含三个部分：

1. 监听浏览器 `hashchange` 事件
2. 路由表：将 Hash 片段映射到组件
3. 根据 Hash 片段渲染相应组件

**监听 `hashchange` 事件** 

浏览器 `hashchange` 事件会在 Hash 片段变化时触发，为我们提供了监听路由变化的契机。我们可以使用 `window.onhashchange` 来监听此类变化。

**路由表** 

路由表是一个将 Hash 片段映射到组件的对象。当 Hash 片段变化时，我们会查阅路由表以确定渲染哪个组件。

**渲染组件** 

一旦我们知道了要渲染哪个组件，就可以将该组件的模板注入到应用程序的根节点中。我们可以使用 `document.body.innerHTMl` 来达到此种意图。

**实操环节** 

```js
// 创建路由表
const router = {
  "#/home": "Home",
  "#/about": "About",
  "#/contact": "Contact"
};

// 监听hashchange 事件
window.onhashchange = function () {
  // 根据 Hash 片段渲染组件
  renderComponent(router[location.hash]);
};

// 渲染组件
function renderComponent(component) {
  document.body.innerHTMl = `<p>${component} page</p>`;
}