前言
经过上一节课的学习,我们已经完成了提取我们想要的路由信息数据格式,提取完毕了之后,接下来我们该干什么,接下来需要做的步骤就是监听路由的变化,保存当前的路由。
那么就会遇到几个问题,就是怎么监听,怎么保存,我们先回到 VueRouter 的官方文档,点击右上角的 API 参考,然后拖动到底部,在底部找到组件注入,当中的注入的属性:
其实我们在使用 VueRouter 的时候,只要你注册了 VueRouter 之后,他会在每一个 Vue 实例中都添加两个属性,一个是 $router,一个是 $route,这两个属性是什么呢?
$router
其实对应着就是我们自定义的 NueRouter 对象。
$route
$route
其实对应着就是一个普通的对象,这个对象就保存了当前的路由地址,等等等等一系列信息,所以为了将来能够注入这两个对象,我这里单独写一个类来存储这两个对象相关的信息。
代码实现
class NueRouterInfo {
constructor() {
this.currentPath = null;
}
}
通过这个类,我们就可以保存当前的路由地址,默认等于 null,将来路由地址发生变化的时候,我们就可以修改这个值。
定义好了这个类我们是需要使用这个类,所以我们在哪里进行使用呢,我们在 NueRouter 类中进行使用,我们在 NueRouter 类中定义一个属性,这个属性就是 NueRouterInfo 的实例,然后在 NueRouter 的构造函数中进行初始化路由信息。
首先定义 NueRouterInfo 的实例:
this.routerInfo = new NueRouterInfo();
然后在 NueRouter 的构造函数中进行初始化路由信息,我这里定义一个 initDefault 方法,然后在这个方法中进行初始化路由信息,这个方法是在 NueRouter 的构造函数中进行调用的。
在 initDefault 方法中,首先根据当前的 mode 也就是路由模式来进行走不同分支的逻辑代码,如果是 hash 模式,那么我们就需要监听 hashchange 事件,如果是 history 模式,那么我们就需要监听 popstate 事件。
这是其中的一步,我们的第一步其实并不是监听,首先要处理的就是,打开的界面先判断 mode 模式如果是 hash,看看界面有没有 hash,如果没有就跳转到 #/
,如果有就不用管了,如果是 history 模式,那么就看看界面有没有 history,如果没有就跳转到 /
,如果有就不用管了。
第二步才是监听,监听的时候,我们需要将当前的路由地址保存到 NueRouterInfo 的实例中,好了,我们来看看代码怎么写。
initDefault() {
if (this.mode === 'hash') {
// 1.判断打开的界面有没有hash, 如果没有就跳转到#/
if (!location.hash) {
location.hash = '/';
}
// 2.加载完成之后和hash发生变化之后都需要保存当前的地址
window.addEventListener('load', () => {
this.routerInfo.currentPath = location.hash.slice(1);
});
window.addEventListener('hashchange', () => {
this.routerInfo.currentPath = location.hash.slice(1);
console.log(this.routerInfo);
});
} else {
// 1.判断打开的界面有没有路径, 如果没有就跳转到/
if (!location.pathname) {
location.pathname = '/';
}
// 2.加载完成之后和history发生变化之后都需要保存当前的地址
window.addEventListener('load', () => {
this.routerInfo.currentPath = location.pathname;
});
window.addEventListener('popstate', () => {
this.routerInfo.currentPath = location.pathname;
console.log(this.routerInfo);
});
}
}
测试
代码写完了,我们来测试一下,先在 app.vue 中定义两个 a 标签 href 是 hash 模式代码如下:
<template>
<div id="app">
<a href="#/home">首页</a>
<a href="#/about">关于</a>
</div>
</template>
<style>
</style>
然后在更改一下 NueRouter 的传参,将 mode 改成 hash 模式, 我们来测试第一步我们处理的逻辑,打开界面,看看有没有 hash,如果没有就跳转到 #/
,如果有就不用管了。
首先访问:http://localhost:8080/ ,然后我们看看界面的地址栏,发现没有 hash,默认就会跳转到 #/
:
然后我们再访问:http://localhost:8080/#/home ,然后我们看看界面的地址栏,发现有 hash,就不用管了:
接下来我们测试第二步,监听 hashchange 事件,我们在 hashchange 事件中打印了 NueRouterInfo 的实例,看看有没有保存当前的路由地址,我们分别点击首页和关于,打印结果如下:
好了,hash 模式的测试就完成了,关于 history 模式需要编写的代码比较多,我这里就不带着大家一起来验证了,因为他们两个都是同一个世界同一个梦想的。
到此为止,我们就完成了初始化路由信息的代码编写,接下来我们下一篇的内容就是根据当前的路由地址,找到对应的组件,然后渲染到页面上。