关于vue.js:Vue路由实现二macther中的addRoutes原理

macther是什么？

依据用户传递的routes创立匹配关系,它外面提供两个办法：addRoutes和match

class VueRouter{
    constructor(options){
    //createMatcher返回addRoutes和match两个办法
        this.matcher = createMatcher(options.routes || []);
    }
    init(app){}
}

编写createMatcher办法

function createMatcher(routes) {
    // 收集所有的路由门路, 收集门路的对应渲染关系
    // pathList = ['/','/about','/about/a','/about/b']
    // pathMap = {'/':'/的记录','/about':'/about记录'...}
    let {pathList,pathMap} = createRouteMap(routes);
    
    // 这个办法就是动静加载路由的办法
    function addRoutes(routes){
        // 将新增的路由追加到pathList和pathMap中
        createRouteMap(routes,pathList,pathMap);
    }   
    function match(){} // 稍后依据门路找到对应的记录
    return {
        addRoutes,
        match
    }
}

addRoutes办法的实现

addRoutes是初始化路由表和新增路由。

function createRouteMap(routes,oldPathList,oldPathMap){
    // 当第一次加载的时候没有 pathList 和 pathMap
    let pathList = oldPathList || []; 
    let pathMap = oldPathMap || Object.create(null);
    routes.forEach(route=>{
        // 增加到路由记录，用户配置可能是有限层级，稍后要递归调用此办法
        addRouteRecord(route,pathList,pathMap);
    });
    return { // 导出映射关系
        pathList,
        pathMap
    }
}   
// 将以后路由存储到pathList和pathMap中
function addRouteRecord(route,pathList,pathMap,parent){
    // 如果是子路由记录 须要减少前缀 
    let path = parent?`${parent.path}/${route.path}`:route.path;
    let record = { // 提取须要的信息
        path,
        component:route.component,
        parent
    }
    if(!pathMap[path]){
        pathList.push(path);
        pathMap[path] = record;
    }
    if(route.children){ // 递归增加子路由
        route.children.forEach(r=>{ 
            // 这里须要标记父亲是谁
            addRouteRecord(r,pathList,pathMap,route);
        })
    }
}