BNTang

前言

好了经过上一篇的学习,我们已经知道了如何监听 Hash 的变化,如何监听路径的一个变化,本篇我们就可以来实现我们自己的 VueRouter 了, 那么怎么实现呢,在实现之前我们先来回顾一下官方的 VueRouter 是怎么使用的。

VueRouter 的使用

首先需要去下载官方的 VueRouter,如果是通过 npm 的方式就可以通过 npm install vue-router 来进行安装,如果是通过 script 的方式引入的话,可以通过 cdn 的方式来进行引入,然后我们就可以在 Vue 的实例中进行使用了。

如上这是第一步,第二呢就是注册我们的 VueRouter,通过 Vue.use(VueRouter) 来进行注册,然后我们就可以在 Vue 的实例中进行使用了。

通过观察 VueRouter 是通过,Vue.use 进行注册的,所以 VueRouter 是一个插件,所以说编写 VueRouter 就是在编写一个插件。

好,那么我现在就新建一个 Nue-Router.js 文件,然后我们就可以开始编写我们的 VueRouter 了。

紧接着我在文件内部搭建了一个插件的基本结构,代码如下:

class NueRouter {
}

NueRouter.install = (Vue, options) => {
}
export default NueRouter;

搭建好了之后我们来看看怎么使用的,我通过观察官方的 VueRouter 的使用发现,是通过 new VueRouter({}) 的方式来进行使用的,在创建的时候给他传递了参数,所以说我们需要在 NueRouter 的构造函数中接收这个参数, 那么外界传递了什么参数给我们呢,通过观察官方的示例,可以得知传递了一个 mode 的参数,这个参数是用来指定路由的模式的,是 hash 还是 history,所以说我们需要在 NueRouter 的构造函数中接收这个参数,还传递了一个用户配置了路由的 routes 参数,所以说我们也需要在 NueRouter 的构造函数中接收这个参数,那么我们就可以在 NueRouter 的构造函数中接收这两个参数了,代码如下:

class NueRouter {
    constructor(options) {
        this.mode = options.mode || 'hash';
        this.routes = options.routes || [];
    }
}

保存好了这些信息之后还没完,为了后续我们方便去处理 routes 的信息,我需要改造一下,改造成什么样子呢,就是将之前的路由地址改造为 key, 组件是我们的一个 value,那么这样子的话我们将来就可以通过 key(路由地址) 去获取到我们的组件了,然后直接将我们获取到的组件渲染到 router-view 中就可以了。

所以最终我要改造的数据结构如下:

{
    '/home': Home,
    '/about': About
}

那么我们怎么去改造呢,我们可以通过遍历 routes,然后将每一项的 path 作为 key,component 作为 value,组装一个全新的对象将全新的对象数组进行存储到 NueRouter 的 routes 中,代码如下:

createRoutesMap() {
    return this.routes.reduce((map, route) => {
        map[route.path] = route.component;
        return map;
    }, {});
}

测试

好了,我们现在已经将我们的路由信息提取出来了,那么我们就可以进行测试了,我们将官方的 VueRouter 替换成我们自己的 NueRouter,然后运行项目,打开控制台,我们可以看到我们的路由信息已经被提取出来了。

最后

相关文章: