手写 Vue.js Router 源码，揭秘路由跳转的奥秘

前言

随着单页应用 (SPA) 的兴起，前端路由器的重要性日益凸显。作为一款流行的单页应用框架，Vue.js 也提供了自己的路由解决方案——Vue.js Router。本文将带领你从源码层面剖析 Vue.js Router 的工作原理，深入了解路由跳转背后的实现机制，并揭秘 URL 变化、浏览器历史记录、hash 模式和 history 模式等概念的奥秘。

从源码解读路由跳转

1. 路由注册

路由器首先需要注册路由规则，以定义不同路径对应的组件。在 Vue.js Router 中，可以使用 Vue.use() 方法注册路由器，并传入一个路由配置对象。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

2. 监听 URL 变化

路由器会监听 URL 变化，并在发生变化时触发相应的路由事件。在 Vue.js Router 中，主要监听了 hashchange 和 popstate 两个事件。

• hashchange 事件：当 URL 中的哈希部分发生变化时触发。在 hash 模式下，路由器使用哈希部分来标识不同的路由。
• popstate 事件：当浏览器历史记录发生变化时触发。在 history 模式下，路由器使用浏览器历史记录来标识不同的路由。

3. 路由匹配

当 URL 发生变化时，路由器会尝试匹配当前的 URL 与已注册的路由规则。如果匹配成功，则会渲染相应的组件。在 Vue.js Router 中，使用 match() 方法来执行路由匹配。

const matched = router.match(location.pathname)

如果匹配成功，则 matched 会是一个包含匹配到的路由规则的数组。否则，matched 将为空数组。

4. 组件渲染

如果路由匹配成功，则路由器会渲染相应的组件。在 Vue.js Router 中，使用 createApp() 方法创建 Vue 实例，并将其挂载到 DOM 中。

const app = createApp(matched.components.default)
app.mount('#app')

揭秘 URL 变化、浏览器历史记录、hash 模式和 history 模式

1. URL 变化

在 SPA 中，URL 变化通常不会导致页面重新加载。这是因为 SPA 使用了前端路由技术，可以动态地更新页面内容，而无需重新加载整个页面。

2. 浏览器历史记录

浏览器历史记录是浏览器用来记录用户访问过的网页的记录。在 SPA 中，路由器会利用浏览器历史记录来管理路由状态。当用户点击浏览器的后退或前进按钮时，路由器会从历史记录中获取路由状态，并更新页面内容。

3. hash 模式

hash 模式是 Vue.js Router 的默认模式。在 hash 模式下，路由器会使用 URL 中的哈希部分来标识不同的路由。例如，/home 路由的 URL 为 http://example.com/#/home。

hash 模式的优点是简单易用，不需要额外的服务器端配置。缺点是 URL 中会包含哈希符号，这可能会影响 SEO。

4. history 模式

history 模式是 Vue.js Router 支持的另一种模式。在 history 模式下，路由器会使用浏览器历史记录来标识不同的路由。例如，/home 路由的 URL 为 http://example.com/home。

history 模式的优点是 URL 中不会包含哈希符号，这有利于 SEO。缺点是需要额外的服务器端配置，以支持 HTML5 History API。

结语

通过本文的学习，我们深入了解了 Vue.js Router 的工作原理，揭秘了路由跳转背后的实现机制，并掌握了 URL 变化、浏览器历史记录、hash 模式和 history 模式等概念。这些知识对于我们开发单页应用非常有帮助。