如何从ActivatedRouteSnapshot优雅获取完整URL（Angular 5.1）

嘿，这个场景我之前做权限守卫的时候也碰到过！直接用route.url确实只能拿到当前路由段，子路由部分得手动遍历，既麻烦又容易出错，而且碰私有属性_routerState.url风险很高——Angular版本更新随时可能改掉这个私有实现，到时候代码很容易崩。

给你一个基于官方公开API的优雅解决方案，完全不用碰私有变量，还能自动处理子路由、查询参数甚至URL片段：

步骤1：在守卫中注入Router #

首先在你的路由守卫构造函数里注入Angular的Router服务，我们需要用它来生成和序列化完整URL。

步骤2：用createUrlTree + serializeUrl生成完整URL #

在canActivate方法里，通过Router.createUrlTree结合relativeTo参数，基于当前的ActivatedRouteSnapshot生成包含所有层级路由的UrlTree，再用serializeUrl把它转成字符串格式的完整URL。

完整代码示例：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class YourAuthGuard implements CanActivate {
  // 注入Router服务
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | boolean {
    // 生成包含子路由、查询参数的完整目标URL
    const targetFullUrl = this.router.serializeUrl(
      this.router.createUrlTree([], { relativeTo: route })
    );

    // 这里就可以把targetFullUrl存起来，登录成功后直接重定向过去
    console.log('登录后要跳转的完整路径：', targetFullUrl);

    // 你的登录校验逻辑...
    return true;
  }
}

为什么这个方法靠谱？ #

• 完全基于Angular公开的官方API，不会因为版本迭代（比如升级到Angular 6+）而失效；
• 自动处理所有路由层级：不管有多少层子路由，都会完整拼接进去；
• 自动保留查询参数、URL片段（比如#section），不用手动拼接处理；
• 代码简洁，可读性强，比手动遍历route.children优雅太多。

如果只是想获取不带查询参数的纯路径，也可以用route.pathFromRoot遍历所有父级路由，但需要手动拼接，比如：

const purePath = route.pathFromRoot
  .map(routeSegment => routeSegment.url.map(segment => segment.path).join('/'))
  .filter(Boolean)
  .join('/');

不过还是推荐第一种方法，因为它能覆盖所有场景，不用额外处理参数。

内容的提问来源于stack exchange，提问作者Radosław Roszkowiak