手撕 Vue Router —— 深入理解前端路由管理

王木太南
436 阅读4分钟

前言

在vue项目开发中，路由管理是一个至关重要的部分。它不仅决定了应用的导航逻辑，还直接影响了用户体验和性能优化。Vue Router 是 Vue.js 官方提供的路由管理解决方案，它提供了丰富的功能，如嵌套路由、导航守卫、过渡动画等，但同时也可能让初学者感到有些复杂。

本文将通过手撕 Vue Router 的过程，帮助你更好地理解前端路由的原理以及如何在 Vue 项目中实现简单的路由系统。我们将从零开始构建一个类似 Vue Router 的简易版本，从而深入理解其核心概念和实现细节。

一、基本概念

在此次开发过程中，通过使用 JavaScript 来控制页面间的跳转，而不是传统的服务器端跳转。前端路由通常基于浏览器的 history API 或者 URL 的哈希值 (#) 来实现页面之间的切换。

二、实现步骤

  1. 创建路由对象：定义路由规则，包括路径（path）、名称（name）和对应的组件（component）。

  2. 监听 URL 变化：使用 hashchange 事件来监听 URL 的变化，并更新视图。

  3. 动态组件渲染：根据当前的 URL 路径，找到匹配的路由规则并渲染对应的组件。

  4. 链接组件：创建 <router-link> 组件用于生成带有正确 URL 的链接。

  5. 视图组件：创建 <router-view> 组件用于展示当前活动的组件。

三、代码实现

要构建一个简易版的Vue Router，我们需要理解其核心组成部分：路由配置、路由组件（本文主要介绍RouterLink和RouterView）、路由历史管理、以及如何在Vue应用中安装和使用路由。下面是详细的实现过程：

1. 路由配置

路由配置是定义应用中所有可访问页面的基础。这里我们首先在vue项目的src/router/index.js中配置路由，如下：

import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About },
];

2. 创建路由对象

在router文件夹下创建一个grouter文件夹，在该文件夹下的index.js文件中创建路由对象涉及管理路由的历史状态和当前路由的状态。我们可以使用浏览器的history API或URL的哈希值来跟踪路由变化。这里采用哈希模式为例：

// 创建一个基于哈希的路由历史管理器
const createWebHashHistory = () => ({
    url: window.location.hash.slice(1) || '/',
    bindEvents: (fn) => window.addEventListener('hashchange', fn),
});

// 创建路由实例
const createRouter = (options) => {
    const router = {
        history: options.history,
        routes: options.routes,
        current: ref(options.history.url),
    };

    // 绑定事件监听器，当URL的哈希值变化时更新当前路由
    router.history.bindEvents(() => {
        router.current.value = window.location.hash.slice(1);
    });

    return router;
};

3. 路由组件

RouterLink

在views文件夹下创建RouterLink组件负责生成带有正确URL的链接，其href属性会根据传入的to属性动态生成：

<template>
    <a :href="'#' + props.to">
        <slot/>
    </a>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    to: {
        type: String,
        required: true,
    },
});
</script>

RouterView

再在同一目录下，创建RouterView组件用于显示当前激活的组件，它会根据当前路由状态动态渲染相应的组件：

<template>
    <component :is="currentComponent"></component>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter } from './index';

const router = useRouter();
const currentComponent = computed(() => {
    return router.routes.find((route) => route.path === router.current.value)?.component;
});
</script>

4. 安装与使用路由

在Vue应用启动时，我们需要安装路由系统，以便应用中的组件可以利用它。这在main.js文件中实现：

import { createApp } from 'vue';
import router from './router/index';
import App from './App.vue';

const app = createApp(App);

app.use(router).mount('#app');

安装过程中，我们通过provide向Vue应用中注入路由对象，使得任何组件可以通过inject获取到它，或使用useRouter函数直接访问：

app.provide(ROUTER_KEY, router);

在组件中使用：

const router = inject(ROUTER_KEY);

或者：

import { useRouter } from './index';

const router = useRouter();

通过上述步骤展示的构建简易Vue Router的基本流程，从定义路由配置到创建路由对象，再到实现RouterLink和RouterView组件，最后安装路由并使其在整个应用中可用。虽然这个简易版本的功能有限，但它涵盖了构建路由系统的核心思想，适用于简单的单页应用架构。最终以上步骤最后实现的效果如下：

四、结论

通过手动实现一个简易的 Vue Router，我们不仅可以更深刻地理解前端路由的工作原理，还可以掌握 Vue 中的关键概念，如组件、插槽、动态组件和响应式系统。这对于提高我们的编码能力和对框架的理解都是大有裨益的。希望这篇文章能够帮助你更好地理解和掌握前端路由管理的核心知识。
最后，如果觉得文章不错的话，别忘了点赞、收藏、关注，三者任选其三即可。

avatar
文章
阅读
粉丝