Ionic 5(Angular 9)路由匹配错误求助：点击侧边菜单跳转至Profile页面失败

嘿，我一眼就揪出问题所在啦！你遇到的路由匹配失败，核心原因是路由配置的路径和实际导航的路径不匹配，咱们一步步来修复：

具体修复步骤： #

1. 修正主路由配置的路径 #

打开你的App-routing.module.ts，你会发现Profile路由的path末尾多了个斜杠/，这会导致Angular只匹配带斜杠的URL（比如/profile/），但你导航的是不带斜杠的/profile，自然匹配不上。把斜杠去掉就好：

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule) },
  { path: 'profile', loadChildren: () => import('./profile/profile.module').then( m => m.ProfilePageModule) }, // 去掉末尾的斜杠
  // 建议添加默认重定向路由，避免空路径报错
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  // 可选：处理未知路由，跳回首页
  { path: '**', redirectTo: 'home' }
];

2. 优化导航路径的写法 #

你的app.component.ts里导航URL用了./profile，虽然不算错，但Angular路由用绝对路径（开头加/）更稳妥，避免相对路径带来的潜在问题：

sideMenu() {
  this.navigate = [
    { title : 'Home', url : '/home', icon : 'home-outline' },
    { title : 'Profile', url : '/profile', icon : 'person-circle-outline' },
  ];
}

3. 检查Profile模块的子路由配置 #

最后别忘了确认profile-routing.module.ts里的子路由配置正确，因为是懒加载模块，子路由的path应该设为空字符串，这样主路由profile才能正确映射到Profile页面组件：

// profile-routing.module.ts示例代码
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProfilePage } from './profile.page';

const routes: Routes = [
  {
    path: '',
    component: ProfilePage
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProfilePageRoutingModule {}

错误原因复盘 #

Angular的路由匹配是严格区分路径格式的，path: 'profile/'和path: 'profile'是两个不同的匹配规则。去掉末尾斜杠后，Angular会自动兼容带/不带斜杠的访问请求，就能正常匹配到你的Profile路由了。

按照上面的步骤修改后，应该就能顺畅导航到Profile页面啦！

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