Angular中判断页面跳转方式：router.navigate还是直接访问

方案一：利用Router导航状态传递标记（无URL暴露） #

在footer模块的跳转代码中，通过NavigationExtras添加自定义状态：

// footer模块内的跳转逻辑
this.router.navigate([`${numer}`], {
  state: { fromRouterNavigate: true }
}).then(() => {});

在body模块的组件中，读取导航状态判断来源：

// body模块组件初始化时判断
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 方式1：通过ActivatedRoute获取（仅在ngOnInit阶段有效）
  const navigation = this.route.getCurrentNavigation();
  const isFromRouter = navigation?.extras.state?.fromRouterNavigate;

  // 方式2：直接读取history state（支持异步场景，刷新后状态丢失）
  // const isFromRouter = window.history.state.fromRouterNavigate;

  if (isFromRouter) {
    // 跳转来自router.navigate方法
  } else {
    // 跳转来自直接访问链接（如邮件点击）
  }
}

方案二：通过查询参数传递标记（刷新后状态保留） #

在footer模块跳转时附加查询参数：

// footer模块内的跳转逻辑
this.router.navigate([`${numer}`], {
  queryParams: { fromRouter: 'true' }
}).then(() => {});

在body模块组件中读取查询参数判断：

// body模块组件初始化时判断
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    const isFromRouter = params.fromRouter === 'true';
    if (isFromRouter) {
      // 跳转来自router.navigate方法
    } else {
      // 跳转来自直接访问链接（如邮件点击）
    }
  });
}

注意：该方案会在URL中暴露参数，介意URL美观性的话不推荐。

方案三：通过全局共享服务传递状态（无URL暴露） #

先创建一个全局状态服务：

// navigation-state.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class NavigationStateService {
  isFromRouterNavigate = false;
}

在footer模块中注入服务并设置标记：

// footer模块内的跳转逻辑
import { NavigationStateService } from './navigation-state.service';

constructor(private router: Router, private navStateService: NavigationStateService) {}

// 跳转前设置标记
this.navStateService.isFromRouterNavigate = true;
this.router.navigate([`${numer}`]).then(() => {});

在body模块组件中读取标记并重置：

// body模块组件初始化时判断
import { NavigationStateService } from './navigation-state.service';

constructor(private navStateService: NavigationStateService) {}

ngOnInit() {
  const isFromRouter = this.navStateService.isFromRouterNavigate;
  if (isFromRouter) {
    // 跳转来自router.navigate方法
    // 重置标记，避免影响后续跳转判断
    this.navStateService.isFromRouterNavigate = false;
  } else {
    // 跳转来自直接访问链接（如邮件点击）
  }
}

注意：该方案在页面刷新后标记会重置，适合不需要保留状态的场景。

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