Angular动态路径下子路由配置与导航问题求助

一、正确的路由数组配置 #

你之前的路由配置核心问题是父路由设置了pathMatch: 'full'，这个属性会让路由严格匹配到:hub/:language就终止，不会继续匹配子路由；另外路径末尾的斜杠无需手动添加，Angular会自动处理。

正确的路由配置如下：

import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { HomeBaseComponent } from './home/home-base.component';
import { NewsComponent } from './news/news.component';

export const appRoutes: Routes = [
  {
    path: ':hub/:language',
    children: [
      // 非懒加载写法
      { path: 'login', component: LoginComponent },
      // 懒加载写法（Angular 14+ 独立组件）
      { path: 'sign-up', loadComponent: () => import('./signup/signup.component').then(m => m.SignupComponent) },
      { path: 'home', component: HomeBaseComponent },
      { path: 'news', component: NewsComponent },
      // 可选：访问domain.com/hub/language时默认跳转到home页面
      { path: '', redirectTo: 'home', pathMatch: 'full' }
    ]
  },
  // 可选：处理不存在的路由，重定向到默认路由或404页面
  { path: '**', redirectTo: 'default-hub/en/login' }
];

配置要点： #

• 移除父路由的pathMatch: 'full'，确保Angular能匹配父路由后继续匹配子路由。
• 懒加载组件需返回包含组件的Promise，而非直接返回组件。
• 可添加默认子路由，优化用户直接访问domain.com/hub/language时的跳转逻辑。

二、正确的路由导航方式 #

根据当前所在路由位置，导航分为两种场景：

1. 相对导航（父/子路由组件内） #

若当前已处于domain.com/hub/language或其子路由页面，可使用相对路径跳转同层级子路由：

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

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

// 从当前子路由跳转到login
this.router.navigate(['login'], { relativeTo: this.route });

// 从子路由向上一级再跳转到login
this.router.navigate(['../login'], { relativeTo: this.route });

2. 绝对导航（任意位置） #

若需从任意位置直接跳转到指定的hub/language/login，需传入完整路由参数：

// 已知hub和language的值时
this.router.navigate(['my-hub', 'en', 'login']);

// 或带根路径的写法
this.router.navigate(['/', 'my-hub', 'en', 'login']);

三、常见问题排查 #

• 确保AppComponent模板中添加了<router-outlet></router-outlet>，子路由组件会渲染在此处。
• 动态参数hub和language可通过ActivatedRoute获取：

  import { ActivatedRoute } from '@angular/router';
  
  constructor(private route: ActivatedRoute) {
    const hub = this.route.parent?.params.get('hub');
    const language = this.route.parent?.params.get('language');
  }
  

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