路由这层东西看着简单真正用起来全是细节。Angular项目里几乎所有页面跳转、权限控制、模块懒加载都绕不开RouterModule可很多开发者的认知停留在“配置一个routes数组、模板里放一个router-outlet”就没下文了。这个系列的第一篇我不打算把官方文档复读一遍而是专门把RouterModule的配置方式、路由出口的渲染机制这两块核心内容讲透顺带把实际开发中高发的几个坑列出来。适合刚接触Angular路由的初学者也适合写过一段时间但遇到“跳转不生效”“白屏”“参数丢”这些问题时没有头绪的开发者。我做了几年Angular项目一个直观感受是路由问题的排查往往比写路由代码更花时间很多坑的根源都在对RouterModule和router-outlet这两个最基础概念的理解偏差上。所以这一篇讲的都是实打实的东西从配置到原理从代码到排查尽量让读者看完能直接用到项目里。1. 页面跳转的本质单页应用里的“前台分发系统”传统的多页面网站页面跳转靠浏览器向服务器重新发起请求服务器返回另一个HTML整个页面刷新。Angular这类单页应用不一样应用启动时只会加载一个HTML页面后端的“页面切换”就交给了前端路由路由根据URL的变化决定当前该显示哪个组件并且不触发整页刷新。打个比方路由规则就像公司前台的分发表来访者报出门牌号前台告诉他去哪个会议室这个过程不需要把整栋大楼重新改造一遍。Angular路由由angular/router包提供核心入口就是RouterModule这个模块。平时我们写的routes数组、调用的forRoot/forChild、模板里的router-outlet都属于这套体系的不同部分。很多人不理解为什么是“模块”不是“服务”因为Angular把路由功能设计成了可配置的模块通过RouterModule把路由配置、指令、服务打包注入到应用里统一管理。这个设计带来的直接好处是路由能力可以被任意模块引入和扩展。根模块拿到的是全局路由服务特性模块拿到的是挂载在根路由之下的局部路由配置互不干扰又层级分明。理解了这个分层后面看forRoot和forChild的区别就不会困惑了。2. 路由的根基RouterModule 的正确打开方式2.1 forRoot 与 forChild为什么根模块和子模块用法不一样RouterModule最常被提到的方法就是forRoot()和forChild()。一个典型的根路由配置长这样// app-routing.module.ts import { NgModule } from angular/core; import { RouterModule, Routes } from angular/router; const routes: Routes [ { path: , redirectTo: /home, pathMatch: full }, { path: home, component: HomeComponent }, { path: about, component: AboutComponent } ]; NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}而特性模块里的路由配置比如一个ProductModule用的是forChild()// product-routing.module.ts import { NgModule } from angular/core; import { RouterModule, Routes } from angular/router; import { ProductListComponent } from ./product-list.component; import { ProductDetailComponent } from ./product-detail.component; const routes: Routes [ { path: products, component: ProductListComponent }, { path: products/:id, component: ProductDetailComponent } ]; NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class ProductRoutingModule {}为什么根模块必须用forRoot子模块必须用forChild原因是forRoot会创建全局唯一的Router服务实例并且在应用启动时执行初始导航forChild只做一件事——把新的路由配置合并到现有的路由表中不会重复创建Router服务。对比项RouterModule.forRoot()RouterModule.forChild()使用位置根模块AppModule特性模块如商品、订单模块创建Router服务创建全局唯一实例不创建复用已有实例可配置全局参数支持如enableTracing、useHash不支持路由合并方式初始化路由表追加到已有路由表重复调用后果多次调用会创建多个Router实例报错或行为异常可以多次调用但要注意路由路径冲突实际项目中一个高频翻车点就是有人图省事在懒加载的子模块里也用了forRoot结果启动后控制台直接报错说Router已被实例化。所以记住一句话全应用只能有一个forRoot其余地方都交给forChild。如果开发的是库项目自身模块的路由配置同样用forChild因为最终消费方会在根模块调forRoot。2.2 路由表怎么写才不踩坑核心配置项逐个拆解Routes数组是路由的核心配置每个元素叫Route。我挑几个影响面最大、最容易出问题的配置项逐个拆解。先说path和component。path是URL路径片段component是对应要渲染的组件。这里有个新手必踩的坑path里不能以/开头除非是空字符串。因为path表示的是“相对于当前路由层的路径片段”子路由的path会自动拼接在父路由的path后面。如果写了/homeAngular会把路径解析成绝对路径导致匹配异常。然后是redirectTo和pathMatch。重定向常常被误解。{ path: , redirectTo: /home, pathMatch: full }这个配置里pathMatch: full表示必须整个路径完全匹配空字符串才重定向。如果没有写pathMatch或者写成prefix那会作为任意路径的前缀去匹配结果就是所有路径都命中这个重定向页面永远停在/home其余路由全部失效。我见过不止一个同事因为这个把整个路由表“劫持”了。通配符**也很关键一般放在路由表末尾做404兜底{ path: **, component: NotFoundComponent }**能匹配任意路径所以必须放在最后。放在前面的后果是它优先命中后面所有路由都匹配不到了。这里有一个很多人忽略的细节Angular的路由匹配默认按Routes数组的声明顺序进行第一个匹配到的生效而不是“最精确的生效”。理解了这一点很多“为什么我的路由不生效”的排查就会快很多。children用于配置嵌套路由loadChildren用于懒加载canActivate等守卫用于权限控制。第二篇系列里我会专门讲守卫和懒加载这篇先把基本配置和匹配顺序吃透。有一点值得现在提出来loadChildren接收一个函数函数返回import()动态导入的模块这个写法替代了早期Angular版本里传字符串路径的写法类型安全并且支持更好的代码分割。3. 路由出口页面组件究竟渲染到哪里3.1 router-outlet 的工作原理配置了路由表之后组件显示在哪里答案是router-outlet。这个指令在模板中占据一个位置Angular会根据当前激活的路由把对应的组件动态渲染到这个位置里。工作流程是这样的路由匹配到某个Route后Angular会取得该路由关联的组件类型然后用ComponentFactoryResolver动态创建组件实例再把它挂载到router-outlet对应的ViewContainerRef上。路由切换时旧的组件会被销毁新的组件被创建整个过程发生在同一个出口位置。这里有一个非常关键的认知router-outlet不是“把整个页面换掉”的魔法它只是应用组件树里的一个替代节点。如果你的根组件模板里写了router-outlet/router-outlet那所有路由组件都会渲染在这个标签的位置。父组件和它的布局侧边栏、顶部导航会一直保留只有出口区域的内容在变化。所以Angular应用里常见的设计是根组件只放一个出口所有页面的公共布局放外层组件内部再嵌套出口实现局部刷新。看一个最简单也最常见的根组件模板!-- app.component.html -- div classapp-layout app-navbar/app-navbar main classcontent router-outlet/router-outlet /main /div导航栏是公共的路由组件渲染在router-outlet的位置。所有页面切换都只替换main内部的部分导航栏不重新渲染这是单页应用体验好的关键原因之一。3.2 命名出口与辅助路由router-outlet支持name属性未命名的是默认出口命名出口可以同时渲染多个路由组件。这个机制是辅助路由auxiliary routes的基础。命名出口的配置方式是在路由表里指定outletconst routes: Routes [ { path: chat, component: ChatComponent, outlet: sidebar } ];模板里有多个出口router-outlet/router-outlet router-outlet namesidebar/router-outlet导航时指定出口名称a [routerLink][{ outlets: { sidebar: [chat] } }]打开聊天/a这个能力适合做“侧边栏独立于主页面内容”的场景比如聊天窗口、购物车抽屉、消息中心。实际开发里用命名出口的频率不算高但遇到时需要能马上上手。一个常见的坑是命名出口路由激活后URL里会带上(sidebar:chat)这样的片段如果对这个格式不熟悉排查时会误以为路由写错了。4. 页面跳转实操从创建项目到传参回显4.1 搭建最小可运行案例理论知识讲完直接跑一个完整案例。我用Angular CLI创建项目然后一步步把路由配置、出口、页面跳转串起来。先创建一个新项目--routing参数会让CLI自动生成带路由模块的骨架ng new router-demo --routing生成的项目里默认有app-routing.module.ts和app.module.ts。打开app-routing.module.ts默认只有一行空路由const routes: Routes [];接下来创建几个页面组件。我做了HomeComponent、AboutComponent和ProductComponent三个页面其中ProductComponent接收一个id参数模拟详情页ng generate component home ng generate component about ng generate component product然后配置路由表// app-routing.module.ts import { NgModule } from angular/core; import { RouterModule, Routes } from angular/router; import { HomeComponent } from ./home/home.component; import { AboutComponent } from ./about/about.component; import { ProductComponent } from ./product/product.component; const routes: Routes [ { path: , redirectTo: /home, pathMatch: full }, { path: home, component: HomeComponent }, { path: about, component: AboutComponent }, { path: product/:id, component: ProductComponent }, { path: **, redirectTo: /home } ]; NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}根模板里放出口!-- app.component.html -- h1路由示例/h1 nav a routerLink/home routerLinkActiveactive首页/a a routerLink/about routerLinkActiveactive关于/a /nav router-outlet/router-outlet4.2 模板跳转与编程式导航Angular里跳转有两种方式模板中用routerLink指令组件类中用Router服务。routerLink的常见写法有这么几种!-- 绝对路径跳转 -- a routerLink/home首页/a !-- 相对路径跳转当前路径是 /product/123跳转到 /product/123/detail -- a routerLinkdetail详情/a a routerLink../list返回列表/a !-- 带参数的跳转 -- a [routerLink][/product, productId]商品详情/a !-- 带查询参数的跳转 -- a [routerLink][/about] [queryParams]{ from: home }关于带来源参数/arouterLinkActive用于给当前激活的导航项加样式接收一个CSS类名。它的工作逻辑是当路由匹配到该链接指向的路径时把类名加到元素上。实际项目里做顶部tab高亮基本人手一个。编程式导航用Router服务import { Router } from angular/router; constructor(private router: Router) {} goToProduct(id: number): void { this.router.navigate([/product, id]); } goBack(): void { this.router.navigate([../], { relativeTo: this.route }); }navigate方法的第一个参数是路径片段数组第二个参数可以传relativeTo、queryParams、replaceUrl等选项。这里有一个很多人搞混的点navigate返回的是Promiseboolean真正跳转是异步的不要在调用后立刻读取路由状态容易拿到旧值。4.3 路由参数path参数、查询参数、参数订阅详情页按/product/:id配置后组件里拿参数有两条路快照snapshot和订阅paramMap。import { Component, OnInit } from angular/core; import { ActivatedRoute } from angular/router; Component({ selector: app-product, template: p当前商品ID{{ productId }}/p }) export class ProductComponent implements OnInit { productId: string ; constructor(private route: ActivatedRoute) {} ngOnInit(): void { // 快照方式适合组件只创建一次、参数不变的情况 this.productId this.route.snapshot.paramMap.get(id); // 订阅方式同一组件实例复用而参数变化时必须用订阅 this.route.paramMap.subscribe((params) { this.productId params.get(id) ?? ; }); } }初学者很容易忽略快照和订阅的差异。场景是这样的如果从/product/1跳转到/product/2Angular会复用ProductComponent的组件实例不会重新走一遍ngOnInit。如果用snapshot取值第二次跳转后页面显示的仍然是旧的1。这时候必须用subscribe订阅paramMap在回调里更新数据。注意subscribe记得在ngOnDestroy里取消订阅或者用takeUntilDestroyed之类的操作符否则会有内存泄漏风险。这是Angular开发者面试常考题也是实际项目里的高频隐患。查询参数的读取方式类似只是换成了queryParamMap。有些场景下需要同时监听路径参数和查询参数的变化可以用this.route.params和this.route.queryParams但注意它们都是Observable每次跳转会发出新值一定要处理好订阅生命周期。5. 高发问题排查实录这些坑我基本都踩过5.1 路由配置了却白屏场景routes数组配置好了router-outlet也放了但页面一片空白控制台也没有明显报错。排查顺序基本是固定的先看根模块有没有正确引入AppRoutingModule。CLI生成的项目里AppModule的imports数组应该包含AppRoutingModule如果不是CLI生成很多人会漏掉这一步。然后再看路由表里的组件有没有在declarations里声明并导入对应模块。再然后检查router-outlet是不是放在了预期位置有时组件名字写错或者出口放在了别的地方内容渲染到了别处。一个隐蔽的原因是根组件模板里如果用router-outlet /这种自闭合写法可能会在部分场景下解析异常。Angular模板中建议写成成对的router-outlet/router-outlet避免不必要的兼容性问题。5.2 通配符和空路径的匹配陷阱前文提过通配符必须放最后。我再补充一个真实场景路由表里有{ path: **, redirectTo: /home }结果用户访问/product/999时居然没有进入详情页而是被重定向到了首页。原因就是通配符放在了/product/:id的前面。排查时建议在路由表顶部加一个临时排查项{ path: **, component: DebugComponent } // 临时用于排查正常项目放末尾如果加上这个之后所有页面都显示DebugComponent说明前面某条路由的匹配优先级压过了你的预期逐条检查path写法。这个排查法在复杂路由表里尤其好用。还有一个场景配置了{ path: home, component: HomeComponent }但访问/时直接白屏。原因是没有处理空路径。要么给空路径配置组件要么重定向到明确的路由{ path: , redirectTo: /home, pathMatch: full }记住了凡是redirectTopathMatch写full最保险尤其目标路径是另一个有具体路径的路由时。5.3 刷新页面404与跳转后组件不刷新刷新404不是Angular本身的问题而是静态资源服务器的配置问题。典型场景部署Nginx或类似静态服务器时服务器找不到/product/123对应的物理文件返回404。常规做法是把所有未匹配的路径重写到index.htmlAngular路由接管后再做前端匹配。这个配置和部署环境强相关但如果你在本地开发时用ng serve从未遇到过404上线后出现了基本就是这个原因。跳转后组件不刷新这个问题我在前面的4.3小节里已经讲了原因和解法。这里再补一个现象从列表页跳转到详情页详情页依赖ngOnInit里的一次性加载第二次进入详情页不触发ngOnInit数据没刷新。这也是同一个根因——路由参数变了组件实例没变。解法还是订阅paramMap在回调里重新加载数据。下面是几个高频问题速查表现象可能原因排查方向访问根路径白屏空路径未配置或未重定向检查path: 和pathMatch所有路径都被重定向首页通配符或空路径放在路由表前面调整路由表顺序兜底放最后详情页参数不更新使用了snapshot.paramMap改为订阅paramMap子模块路由不生效模块未用forChild或未在父模块imports检查RouterModule.forChild页面刷新后404静态服务器未重写到index.html部署层面配置try_files控制台报Router重复实例化多于一个forRoot全局只保留根模块的forRoot路由跳转后滚动条不在顶部Angular默认保持滚动位置路由配置设置scrollPositionRestoration: enabledscrollPositionRestoration这个配置值得展开一下很多项目都遇到过“从详情页返回列表页滚动条还停在之前的位置”这种体验问题。在forRoot的第二个参数里配置RouterModule.forRoot(routes, { scrollPositionRestoration: enabled, anchorScrolling: enabled })forRoot实际上可以接收一个额外的ExtraOptions配置对象除了滚动位置恢复还有useHash、enableTracing等选项。useHash用于兼容不支持HTML5 History模式的服务器环境URL里会出现#号。enableTracing打开后会在控制台输出路由事件日志排查路由生命周期问题时非常好用生产环境记得关掉。6. 留下一个钩子路由体系还有哪些进阶玩法第一篇把最核心的RouterModule配置和router-outlet出口机制讲完了但Angular Router这套体系远不止这些。我在实际项目里用得比较多的还有路由守卫、懒加载、预加载策略以及路由事件机制。尤其是可用性要求高的应用CanActivate、CanDeactivate、Resolve这组守卫组合决定了整个应用的权限骨架和数据预取方式值得单独开一篇详细聊。还有一个推荐做法在项目初期就约定统一的路由命名规范和模块划分方式。比如所有业务模块对应一个路由模块路由的path与模块名一一对应守卫统一放在独立的守卫目录。这样后续做权限调整、懒加载拆分时改动面会小很多。我自己接手过几个路由配置全部堆在一个文件里的老项目维护成本非常高后来都是分批拆成模块路由才算救回来。最后分享一个个人习惯每次配置路由表我都会额外关注两点——通配符的位置和空路径的pathMatch。这两个看似不起眼的配置引起的故障基本都是全站级别的。写配置时多花十秒钟检查排查时少花两小时定位。