当前位置: 首页 > Web前端 > vue.js

vue路由实现(二):macther中的addRoutes原理

时间:2023-03-31 20:16:09 vue.js

什么是麦瑟?根据用户传入的路由创建匹配关系,它提供了两个方法:addRoutes和matchclassVueRouter{constructor(options){//createMatcher返回addRoutes和match两个方法this.matcher=createMatcher(options.routes||[]);}init(app){}}writecreateMatchermethodfunctioncreateMatcher(routes){//收集所有路由路径,并收集路径对应的渲染关系//pathList=['/','/about','/about/a','/about/b']//pathMap={'/':'/'record','/about':'/aboutrecord'...}let{pathList,pathMap}=createRouteMap(routes);//该方法是动态加载路由的方法functionaddRoutes(routes){//向pathList和pathMap添加新的路由}functionmatch(){}//later根据路径找到对应的记录return{addRoutes,match}}addRoutes方法addRoutes的实现是初始化路由表,添加新的路由。functioncreateRouteMap(routes,oldPathList,oldPathMap){//第一次加载时,没有pathList和pathMapletpathList=oldPathList||[];让pathMap=oldPathMap||对象.create(null);routes.forEach(route=>{//添加到路由记录,用户配置可能是无限层级的,后面会递归调用这个方法addRouteRecord(route,pathList,pathMap);});return{//导出映射关系pathList,pathMap}}//将当前路由存入pathList和pathMapfunctionaddRouteRecord(route,pathList,pathMap,parent){//如果是子路由记录,需要添加一个前缀letpath=parent?`${parent.path}/${route.path}`:route.path;letrecord={//提取需要的信息path,component:route.component,parent}if(!pathMap[path]){pathList.push(path);pathMap[路径]=记录;}if(route.children){//递归添加子路由route.children.forEach(r=>{//这里需要标记谁是父亲addRouteRecord(r,pathList,pathMap,route);})}}