经过上一节课的学习,我们已经完成了提取我们想要的路由信息数据格式,提取完毕了之后,接下来我们该干什么,接下来需要做的步骤就是监听路由的变化,保存当前的路由。
那么就会遇到几个问题,就是怎么监听,怎么保存,我们先回到 VueRouter 的官方文档,点击右上角的 API 参考,然后拖动到底部,在底部找到组件注入,当中的注入的属性:
其实我们在使用 VueRouter 的时候,只要你注册了 VueRouter 之后,他会在每一个 Vue 实例中都添加两个属性,一个是 $router,一个是 $route,这两个属性是什么呢?
其实对应着就是我们自定义的 NueRouter 对象。
$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 模式需要编写的代码比较多,我这里就不带着大家一起来验证了,因为他们两个都是同一个世界同一个梦想的。
到此为止,我们就完成了初始化路由信息的代码编写,接下来我们下一篇的内容就是根据当前的路由地址,找到对应的组件,然后渲染到页面上。