面试官：你会手写路由吗？

wow奶茶
812 阅读3分钟

前言

在现代前端应用中，单页面应用(SPA)是主流趋势。SPA依赖于路由系统来管理不同视图之间的导航。虽然Vue.js框架提供了官方的vue-router库来处理路由，但理解其工作原理对于深入学习框架和提升开发技能至关重要。下面，我们将通过一系列代码片段，一步步构建一个简易版的Vue Router。

1. 定义路由组件

首先，我们有基本的组件如Home.vue和About.vue，它们分别对应主页和关于页面。这些组件将被不同的路由路径映射到DOM树中的特定位置。

2. 创建路由实例

在router/index.js中，我们导入了自定义的createRouter和createWebHashHistory函数。这两个函数用于初始化路由实例，并设置使用hash模式。

image.png

import { createRouter, createWebHashHistory } from './grouter/index'
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: About
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

3. 路由逻辑实现

grouter/index.js中的createRouter和createWebHashHistory实现了路由的核心逻辑。createWebHashHistory负责监听浏览器的哈希变化事件，而createRouter则管理着当前的路由状态。

export const createRouter = (options) => {
    return new Router(options)
}

4. Router类

Router类是整个路由系统的中心。它接收路由配置并维护当前的路由状态。通过监听hashchange事件，Router能够实时更新当前的路由信息。

class Router {
    constructor(options) {
        this.history = options.history
        this.routes = options.routes
        this.current = ref(this.history.url)
        this.history.bindEvents(() => {
            this.current.value = window.location.hash.slice(1)
        })
    }
}

5. 路由组件注册

  • router-link router-view
  • vue 组件
  • 自定义组件
  • transition 内置组件
  • 全局组件 在任何地方都可以直接访问 app.component('router-link',RouterLink)
  • 如果组件没有引入， dom 会把它当做一般标签来解析
  • app.component
  • app.use(router)

Router类还包含了一个install方法，用于将RouterLink和RouterView组件注册为全局组件。这样，我们可以在任何地方使用这两个组件，无需单独导入。

install(app) {
    app.provide(ROUTER_KEY, this)
    app.component('router-link', RouterLink)
    app.component('router-view', RouterView)
}

6. RouterLink和RouterView

RouterLink组件用于创建链接，当用户点击时，它会改变URL的哈希值，触发路由切换。RouterView则是一个占位符，用于渲染当前激活的路由组件。

  • router 插件 准准备好nstall方法
  • - 插槽 - 将组件的内部交给外部去自定义 - 提升了组件的可复用性
<!-- RouterLink.vue -->
<template>
    <a :href="'#' + props.to">
        <slot />
    </a>
</template>

<!-- RouterView.vue -->
<template>
    <!-- 渲染当前路由对应的组件 -->
</template>

7. 使用路由

最后，在App.vue中，我们使用RouterLink和RouterView来实现导航和视图渲染。

<!-- App.vue -->
<template>
    <header>
        <nav>
            <router-link to="/">首页</router-link>
            <router-link to="/about">About</router-link>
        </nav>
    </header>
    <main>
        <router-view />
    </main>
</template>

最后呈现的效果如图所示

  • 注意观察hash地址 image.png

  • 当我们点击首页

image.png

页面会跳转到'/'下

  • 点击About

image.png

跳转到'/about'下

结语

总之，通过手工实现Vue Router，我们不仅理解了路由系统的基本结构和工作流程，还探索了如何扩展它以支持更复杂的场景。从简单的组件注册到高级的路由守卫和懒加载，每一步都为我们提供了一次深入学习Vue.js框架的机会。这种深度理解有助于我们在实际项目中更加自信地运用和调试路由相关的功能，同时也为将来可能遇到的自定义需求打下了坚实的基础。

avatar
文章
阅读
粉丝