关于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);        })    }}