Angular 4：直接访问子路由URL时如何重定向到父路由？

刚好之前处理过类似的Angular路由场景，给你分两步解决你的问题：

在Angular里，我们可以通过路由导航的状态来区分用户是从父路由跳转过来，还是直接输入URL/刷新页面：

方案一：利用Router.getCurrentNavigation()判断 #

页面刷新时，getCurrentNavigation()会返回null；而通过代码（比如父路由里的router.navigate）导航过来时，它会返回一个包含导航触发源的对象。直接输入URL访问的话，我们可以通过父路由跳转时传递的状态标记来精准区分。

在子组件的ngOnInit里写这段逻辑：

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

constructor(private router: Router, private route: ActivatedRoute) {}

ngOnInit(): void {
  const navigation = this.router.getCurrentNavigation();
  
  // 页面刷新的情况
  if (!navigation) {
    console.log('页面刷新，需要重定向到父路由');
    this.redirectToParent();
  } 
  // 直接输入URL访问（非父路由代码跳转）的情况
  else if (!navigation.extras.state?.fromParent) {
    console.log('直接访问子路由，需要重定向');
    this.redirectToParent();
  }
}

注意：父路由跳转时要传state标记，比如this.router.navigate(['child'], { state: { fromParent: true } })，这样就能准确区分来源。

方案二：监听Router的NavigationStart事件 #

通过监听路由启动事件，我们可以覆盖所有直接访问、刷新、浏览器前进后退到子路由的场景：

import { Router, NavigationStart } from '@angular/router';
import { Subscription } from 'rxjs';

private routerSub!: Subscription;

constructor(private router: Router) {}

ngOnInit(): void {
  this.routerSub = this.router.events.subscribe(event => {
    if (event instanceof NavigationStart) {
      // event.restoredState为null → 不是通过浏览器前进后退触发的导航
      // 结合路由URL判断是否是目标子路由
      if (!event.restoredState && event.url.includes('/parent/child')) {
        this.redirectToParent();
      }
    }
  });
}

ngOnDestroy(): void {
  this.routerSub.unsubscribe(); // 记得销毁订阅，避免内存泄漏
}

确定需要重定向后，有两种简洁的方式获取父路由并跳转：

方式一：使用相对路径（推荐） #

利用relativeTo参数，直接基于当前子路由导航到父路由，不需要手动拼接路径：

private redirectToParent(): void {
  this.router.navigate(['../'], { relativeTo: this.route });
}

方式二：通过ActivatedRoute.parent获取绝对路径 #

如果需要明确拿到父路由的URL字符串，可以通过parent.snapshot.url拼接：

private redirectToParent(): void {
  const parentSegments = this.route.parent?.snapshot.url.map(segment => segment.path);
  if (parentSegments) {
    const parentUrl = `/${parentSegments.join('/')}`;
    this.router.navigate([parentUrl]);
  }
}

进阶：用路由守卫全局处理 #

如果有多个子路由需要这个逻辑，推荐用CanActivate守卫，不用在每个组件里重复写代码：

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

@Injectable({ providedIn: 'root' })
export class BlockDirectChildAccessGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    const navigation = this.router.getCurrentNavigation();
    // 非代码导航（刷新/直接输入URL）则重定向到父路由
    if (!navigation || navigation.navigationTrigger !== 'imperative') {
      this.router.navigate(['../'], { relativeTo: route });
      return false;
    }
    return true;
  }
}

然后在路由配置里给子路由绑定守卫：

const routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
        canActivate: [BlockDirectChildAccessGuard]
      }
    ]
  }
];

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