Angular获取路由参数问题：URL中username始终返回undefined

你这儿的问题根源很清晰：你定义的是路径参数（Route Parameter），但却误用了获取查询参数（Query Parameter）的方法，所以才拿不到想要的username值！

先搞懂两者的区别： #

• 路径参数是URL中/dashboard/john里的john，对应路由配置里的:username格式
• 查询参数是URL中/dashboard?username=john里的username=john，这种场景才需要用queryParams来获取

正确获取路径参数的步骤： #

1. 确保组件中已注入ActivatedRoute：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

2. 通过snapshot.paramMap获取静态参数（参数不会在组件生命周期内变化时用这个）：

ngOnInit(): void {
  const username = this.route.snapshot.paramMap.get('username');
  console.log(username); // 此时会输出"john"
}

3. 如果路由参数可能在组件复用过程中变化（比如从/dashboard/john跳转到/dashboard/jane但复用同一个组件），建议订阅paramMap的变化：

ngOnInit(): void {
  this.route.paramMap.subscribe(params => {
    const username = params.get('username');
    console.log(username); // 参数变化时会自动更新
  });
}

为什么你的原方法无效？ #

你用的this.route.snapshot.queryParams["username"]是专门用来提取?key=value格式的查询参数的，但你的URL里并没有这种结构，所以自然会返回undefined啦。

内容的提问来源于stack exchange，提问作者user1765862