Angular路由未匹配首个预期路由问题求助

问题描述 #

访问localhost:4200时，预期自动重定向至localhost:4200/tabs/search并渲染SearchComponent，但实际停留在根路径，且加载了MyEventsComponent。

现有路由配置 #

App.routes.ts #

export const routes: Routes = [
  {
    path: '',
    redirectTo: '/tabs/search',
    pathMatch: 'full',
  },
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsModule)
  },
];

tabs.routes.ts #

export const tabsRoutes: Routes = [
    {
        path: '',
        component: TabsPage,
        children: [
            {
                path: 'search',
                loadChildren: () => import('../search/search.module').then(m => m.SearchModule),
            },
            {
                path: 'myevents',
                loadChildren: () => import('../myevents/my-events.module').then(m => m.MyEventsModule),
            },
            {
                path: 'settings',
                loadChildren: () => import('../settings/settings.module').then(m => m.SettingsModule),
            },
            {
                path: 'friends',
                loadChildren: () => import('../friends/friends.module').then(m => m.FriendsModule),
            },
            {
                path: 'shared',
                loadChildren: () => import('../shared/shared.module').then(m => m.SharedModule),
            },
            {
                path: '',
                redirectTo: '/tabs/search',
                pathMatch: 'full',
            },
        ],
    },
    {
        path: '',
        redirectTo: '/tabs/search',
        pathMatch: 'full',
    },
];

search.routes.ts #

export const searchRoutes: Routes = [      
  {
    path: '',
    component: SearchComponent,
  },
];

myevents.routes.ts #

export const myEventRoutes: Routes = [
    {
        path: '',
        component: MyEventsComponent,
    },
];

问题分析与解决步骤 #

1. 修正子路由重定向路径 #

tabs.routes.ts中子路由的redirectTo使用绝对路径会导致路由解析冲突，改成相对路径并移除冗余配置：

export const tabsRoutes: Routes = [
    {
        path: '',
        component: TabsPage,
        children: [
            {
                path: 'search',
                loadChildren: () => import('../search/search.module').then(m => m.SearchModule),
            },
            {
                path: 'myevents',
                loadChildren: () => import('../myevents/my-events.module').then(m => m.MyEventsModule),
            },
            {
                path: 'settings',
                loadChildren: () => import('../settings/settings.module').then(m => m.SettingsModule),
            },
            {
                path: 'friends',
                loadChildren: () => import('../friends/friends.module').then(m => m.FriendsModule),
            },
            {
                path: 'shared',
                loadChildren: () => import('../shared/shared.module').then(m => m.SharedModule),
            },
            // 改为相对路径，适配子路由层级
            {
                path: '',
                redirectTo: 'search',
                pathMatch: 'full',
            },
        ],
    },
];

2. 确认模块路由导入正确性 #

检查SearchModule和MyEventsModule是否正确配置子路由：

// SearchModule示例
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { searchRoutes } from './search.routes';
import { SearchComponent } from './search.component';

@NgModule({
  declarations: [SearchComponent],
  imports: [RouterModule.forChild(searchRoutes)],
  exports: [RouterModule]
})
export class SearchModule { }

3. 检查Tab组件默认选中状态 #

如果使用Ionic的ion-tabs，可能存在默认选中myevents标签的情况，需强制设置默认选中search：

// TabsPage组件
import { Component } from '@angular/core';
import { IonTabs } from '@ionic/angular';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.page.html',
  styleUrls: ['./tabs.page.scss'],
})
export class TabsPage {

  constructor(private tabs: IonTabs) {}

  ionViewWillEnter() {
    this.tabs.select('search');
  }

}

4. 验证根路由配置 #

确保AppModule中正确导入路由模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes) // 确保此处正确导入根路由
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. 清除缓存测试 #

使用浏览器无痕模式访问，或清除缓存后重新加载，避免路由缓存导致的异常。

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