在上篇中项目已经实现了可以加载单个html到index.html中
这看起来可能会让你联想到web中的spa应用，那么从spa应用的角度来看项目中还缺少一个路由控制器，有了路由控制器咱们就可以处理页面的前进和后退，还有页面之间的参数传递了
因为项目会嵌入到electron中，所以咱们不用关心浏览器的前进后退，只要把记录存到内存中就可以了
不过现在看起来有些偏离vscode了，也许到最后不会做出一个vscode了，也许是一个更好玩的东西呢
哈哈哈~

实现一个路由控制器

emmm~
路由控制器，应该有啥呢~~~~~
1.push 控制页面跳转，并将跳转页面存入路由历史中
2.replace 控制页面跳转，但是不存入路由历史中
3.back 页面回退
4.getHistory 获取内存中的路由历史 虽然没想到应用场景，但是我觉的有用
5.clearHistory 清空内存中的路由历史
6.canBack 查看当前页面是否还可以后退，也就是它的上一位页面是否存在
7.getTargetUrl 获取当前页面路径
8.getTargetPageInstance 获取当前页面实例 这个肯定有用

短时间也就想到这么多吧，少的东西之后再补
所以咱们的路由控制器应该包含这些方法，然后嘞，还需要一个路由的配置文件，总不能把配置文件写在控制器里面对吧

路由配置文件具体实现

在./conf中新增routerConfig.class.ts
路由配置文件应该有一个只读的常量，然后可以返回控制器所需的页面控制器

export default class RouterConfig {

    private static readonly pageList = [

    ];

    public static getControll(name: string): any {
    
    }
}

pageList中存放页面配置的列表
getControll用来获取所需的页面控制器
那么来创建一个类型用来描述pageList

type PageList = {
    name: string,
    controll: any
}

目前看起来只需要这两个字段就可以

private static readonly pageList:PageList[] = [
        {name: '/', controll: WelcomeController},
    ];

实现getControll 方法

public static getControll(name: string): any {
        for (let k of RouterConfig.pageList) {
            if (k.name === name) {
                return k.controll;
            }
        }
    }

嘿嘿~ 这里的pageList其实用map来存储更好，可以提升代码的效率~~
不改啦，就这样了
来看看完整的配置文件

/*****************************
 * created by chaixiaoduo@126.com
 * 2020-07-01 21:44:37
 * router enum config
 *****************************/
import WelcomeController from '../controller/welcome.controller'


type PageList = {
    name: string,
    controll: any
}

export default class RouterConfig {

    private static readonly pageList:PageList[] = [
        {name: '/', controll: WelcomeController}
    ];

    public static getControll(name: string): any {
        for (let k of RouterConfig.pageList) {
            if (k.name === name) {
                return k.controll;
            }
        }
    }
}

路由控制器具体实现

路由跳转入参接口实现
query是页面之间传递的参数，不一定都会传所以加个问号

interface RouterEntryInterface {
    name: string;
    query?: any;
}

路由历史记录接口实现
路由记录需要保存路由名和参数等，所以直接继承于RouterEntryInterface

interface RouterHistoryInterface extends RouterEntryInterface {
    uuid: string;
}

路由控制器类接口实现
按照前文所说的需要包含的方法创建一个接口
这里面canBack有所变动，最开始设计是想返回boolean类型，后改成返回上一个页面处于路由历史中的下标顺序

interface RouterInterface {
    push: (RouterEntryInterface) => boolean;
    back: () => boolean;
    replace: (RouterEntryInterface) => boolean;
    getHistoryList: () => RouterEntryInterface[];
    clearHistory: () => boolean;
    canBack: () => number;
    getTargetUrl: () => string;
    getTargetPageIntance: () => any;
}

接下来按类接口把路由控制器类实现出来就可以了

---

此致
敬礼~
小旋风

我建了一个前端微信交流群，欢迎大家加入，qq中转群号：1076484243