学会手写vue-router，再也不用担心vue-router原理了

今天，我们将手把手实现一个简化版的vue-router，主要通过hash模式来实现网址的跳转改变。本文将涉及router-link、router-view以及路由配置，旨在帮助大家深刻理解vue-router在路由加载背后究竟做了些什么。话不多说，让我们直接进入主题。

以下是App.vue文件的代码，感兴趣的小伙伴们可以跟随我一起来实现这个简化版的vue-router。

<template>
  <div>
    <header>
      <nav>
        <router-link to="/">首页</router-link>
        <router-link to="/about">About</router-link>
      </nav>
    </header>
    <main>
      <router-view></router-view>
    </main>
    <footer></footer>
  </div>
</template>
<script setup>
</script>
<style lang="css" scoped>
</style>

接下来是router/index.js的完整代码，我们在这里配置路由：

import { createRouter, createWebHashHistory } from './grouter/index.js';
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        }, {
            path: '/about',
            name: 'About',
            component: About
        }
    ]
})
export default router;

首先，我们来理解一下app.use。

在使用路由插件时，我们通常会在main.js中使用app.use来导入router插件。要手写vue-router，必须先搞懂app.use()的作用。

通过查阅官方文档。

• 我们知道插件中自带一个install()方法。
• 在app.use方法内会自动执行。
• 因此，我们只需关注插件的实现即可。
• 接下来，我们需要创建一个Router对象来管理路由。
• 在useRouter方法和createRouter中，我们可以了解到，在vue-router中有一个Router对象负责全局路由的管理。

下面我们来逐一实现这一功能。

我们来看install方法。

• 我们需要将整个路由对象暴露出去。
• 然后使用createRouter方法来接收暴露的Router对象。
• 并在默认导出时使用provide和inject方法来暴露和接收Router对象。
• 此外，我们还需要使用app.component来注册router-link和router-view为全局组件。 以下是Router和useRouter的完整代码，路径：router/grouter/index.js。

// 标记一下 router 要向所有人暴露
const ROUTER_KEY = "__router__";
export const useRouter = () => {
    //通过关键字获取暴露的Router对象
    return inject(ROUTER_KEY);
}
class Router {
    constructor(options) {
        //history对象就是createHashWebHistroy返回的history对象
        this.history = options.history;
        // 路由对象数组，path,component,name等配置对象
        this.routes = options.routes;
        //获取当前路由地址
        this.current = ref(this.history.url);
       // 这里的方法是监听hashchange事件来更新current，切换路由
       //，可以先不看这一段等会会讲
        this.history.bindEvent(() => {
            this.current.value = window.location.hash.slice(1);
        })
    }
    //use 会调用 插件的install方法
    install(app) {
        // 全局声明 有一个router 全局使用的对象
        app.provide(ROUTER_KEY, this);
        console.log("准备与vue对接");
        //注册全局组件
        app.component('router-link', RouterLink);
        app.component('router-view', RouterView);
    }
}

首页

接下来，我们来实现router-link和router-view。

router-link本质是使用了a标签，所以我们在进行router-link组件封装时， 直接使用标签进行地址栏的跳转，to可以用defineProps来接受，但是router-link中的文字如何添加进入a标签中呢？这里我们使用到插槽Slots语法。

首先是router-link，其完整代码如下，路径：router/grouter/RouterLink.vue。

<template>
  <a :href="'#' + props.to">
    <slot></slot>
  </a>
</template>
<script setup>
const props = defineProps({
  to: {
    type: String,
    required: true,
  },
});
</script>
<style lang="css" scoped>
</style>

然后是router-view，其完整代码如下，路径：router/grouter/RouterView.vue

router-view需要的就相对繁琐一些，因为需要动态的根据地址hash的改变来进行组件的渲染，所以这里我们主要需要两个功能的实现。

组件的动态渲染 hash地址的寻找正确的组件 首先思考功能1，v-if虽然可以动态渲染组件但是太多组件的话这要多少个v-else-if，所以排除，那有没有一种 可以让我们只需要写一个组件然后让组件自动渲染不同的组件呢？你别说哦~~还真有。

传送门：内置特殊元素 | Vue.js (vuejs.org) 这个component组件还真可以满足我们的需求进行组件的动态渲染。那么我们接下来只需要考虑组件的寻找了。

我们可以创建一个mapRouter的map对象，然后在组件被加载时，进行当前router-view对象中的组件信息进行注册（set(path,component)），然后更改地址，只需要进行get方法就可以拿到对应的组件，但是注意有可能用户会输入错误代码所以需要进行校验

<template>
  <!-- 动态组件 -->
  <component :is="component"></component>
</template>
<script setup>
import { useRouter } from "./index.js";
import { computed } from "vue";
const router = useRouter();
// router-view 动态组件 展示 依赖于url的变化
const mapRouter = new Map();
const reflectMapRouter = (router) => {
  router.routes.forEach((route) => {
     // 更具路径进行组件查询，保证O(1)时间
    mapRouter.set(route.path, route.component);
  });
};
//方法执行进行组件注册
reflectMapRouter(router);
// 响应式 router.current 设置为ref
//设置为计算属性响应式更新
const component = computed(() => {
  const nowRoute =```
  const nowRoute = mapRouter.get(router.current.value);
  //这里注意，需要进行校验，因为用户可能输入错误网址
  return nowRoute ? nowRoute : null;
});
</script>
<style lang="css" scoped>
</style>

最后，我们来实现createWebHashHistory和createRouter。

createWebHashHistory负责监听网址的改变，并提供地址中的hash值，而createRouter则简单返回一个new Router()实例。 以下是它们的代码，路径 router/grouter/index.js：

export const createRouter = (options) => {
    return new Router(options);
}
export const createWebHashHistory = () => {
    function bindEvent(fn) {
        window.addEventListener('hashchange', fn);
    }
    // history 对象
    return {
        url: window.location.hash.slice(1) || '/',
        bindEvent
    }
}

本篇文章到此就基本全部完成了，喜欢的话就点个赞和关注吧！