Vue Router初始化路由信息详解

前言

经过上一节课的学习，我们已经完成了提取我们想要的路由信息数据格式，提取完毕了之后，接下来我们该干什么，接下来需要做的步骤就是监听路由的变化，保存当前的路由。

那么就会遇到几个问题，就是怎么监听，怎么保存，我们先回到 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" rel="external nofollow" >首页</a>
    <a href="#/about" rel="external nofollow" >关于</a>
  </div>
</template>
<style>
</style>

然后在更改一下 NueRouter 的传参，将 mode 改成 hash 模式, 我们来测试第一步我们处理的逻辑，打开界面，看看有没有 hash，如果没有就跳转到 #/，如果有就不用管了。

首先访问：http://localhost:8080/ ，然后我们看看界面的地址栏，发现没有 hash，默认就会跳转到 #/:

然后我们再访问：http://localhost:8080/#/home ，然后我们看看界面的地址栏，发现有 hash，就不用管了:

接下来我们测试第二步，监听 hashchange 事件，我们在 hashchange 事件中打印了 NueRouterInfo 的实例，看看有没有保存当前的路由地址，我们分别点击首页和关于，打印结果如下：

好了，hash 模式的测试就完成了，关于 history 模式需要编写的代码比较多，我这里就不带着大家一起来验证了，因为他们两个都是同一个世界同一个梦想的。

到此为止，我们就完成了初始化路由信息的代码编写，接下来我们下一篇的内容就是根据当前的路由地址，找到对应的组件，然后渲染到页面上。

到此这篇关于Vue Router初始化路由信息详解的文章就介绍到这了,更多相关Vue Router内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论