router.navigate() 是否会立即修改路由URL？

调用router.navigate()后，路由URL不会立即同步更新，所以你给出的代码里，紧接着的if判断大概率不会触发console.log('changed')。

原因很简单：Angular的路由导航是异步操作，它需要完成一系列流程——比如路由守卫校验、目标组件解析、视图渲染等——这些步骤全部完成后，router.url才会更新为新的地址。同步代码会在导航流程结束前执行，此时router.url还是旧值。

如果要在导航完成后检查URL并执行逻辑，有两种靠谱的方式：

方式1：利用navigate返回的Promise #

router.navigate()会返回一个Promise，当导航成功完成后Promise会resolve，这时就能拿到最新的URL：

this.router.navigate(['/home/products']).then(() => {
  if (this.router.url.includes('/home/products')) {
    console.log('changed');
  }
});

方式2：监听路由导航完成事件 #

通过router.events监听NavigationEnd事件，这是导航流程最终完成的标志：

import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs/operators';

// 建议在组件初始化逻辑中添加监听
this.router.events.pipe(
  filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
  if (event.url.includes('/home/products')) {
    console.log('changed');
  }
});

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