手写 vue router 源码实现一个简化版的Vue Router

vue router 是 vue.js 的官方路由。它与 vue.js 核心深度集成，让用 vue.js 构建单页应用变得轻而易举。本文将手写实现一个简化版的vue router，通过以下几个方面帮助大家理解vue router 的实现原理：

路由映射表的创建createroutemap：vue router通过配置的路由规则，创建一个路由映射表，用于将路径映射到对应的组件。

组件的初始化initcomponents：vue router通过全局注册 router-link 和 router-view 两个组件，这两个组件分别用于处理路由链接和展示路由组件。

事件的监听initevent：vue router通过监听 hash change 和 load 事件，实现对url中 hash部分的变化进行监控，从而实现路由的切换。

路由变化事件处理 (onhashchange：当url的hash部分变化时，触发 hash change 事件，进而调用 onhashchange 方法来更新当前路由。

vue插件的安装vuerouter.install：vue router通过 install 方法，将 $router 添加到 vue实例的原型上，使得每个vue组件都能够访问到路由实例。

现在，让我们实现一个简化版的vue router：

创建vuerouter类。

class vuerouter ; 路由映射表。

this.currentroute = 当前路由。

初始化。this.in it();

初始化方法。

in it() this.$slots.default);

定义全局组件router-view

vue.component( 'router-view ',初始化事件监听。

in itevent()

使用插件。vue.use(vuerouter);

创建vue实例。

const router = new vuerouter(, path: 'about ',component: about },path: 'contact ',component: contact },创建根实例。

new vue({

el: '#app ',上述**是一个简化版的vue router实现，以下是每一步的详细解释：

1. vuerouter类的构造函数：接收一个包含 routes 配置的选项对象，初始化 routes 、 routemap 和 currentroute 。

2. init方法：在构造函数中调用，用于初始化整个路由系统。包括创建路由映射表、初始化组件和初始化事件。

3. createroutemap方法：遍历 routes 配置，将每个路由规则的路径和对应组件建立映射关系，存储在 routemap 中。

4. initcomponents方法：定义全局组件 router-link 和 router-view 。 router-link 负责生成带有正确路径的链接， router-view 根据当前路径显示对应的组件。

5. initevent方法：在初始化阶段，监听 hash change 和 load 事件，这样可以在url的hash变化时触发路由切换。

6. onhashchange方法：处理路由变化的逻辑。当 hash change 事件触发时，更新当前路由的 path 属性，以便 router-view 组件能够正确显示对应的组件。

7. vuerouter.install方法：vue插件的安装方法，通过在 beforecreate 生命周期中将 $router 添加到vue实例的原型上，使得每个组件都能够通过 this.$router 访问到路由实例。

8. 使用插件：通过 vue.use(vuerouter) 使用插件，这样插件的 install 方法会被调用，确保 $router 能够被添加到vue实例中。

9. 创建vue实例：创建根实例时，将路由实例传入，以便整个应用能够访问路由的功能。

手写 vue router 源码 实现一个简化版的Vue Router