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