Angular 路由未打开所需的默认 url

Question

我正在 Angular 10 中建立一个站点，但我对路由感到有些困惑。 应用路由配置如下：

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const accountModule = () => import('./account/account.module').then(x => x.AccountModule); const onboardingModule = () => import('./onboarding/onboarding.module').then(x => x.OnboardingModule); const memberDashboardModule = () => import('./member-dashboard/member-dashboard.module').then(x => x.MemberDashboardModule); const adminDashboardModule = () => import('./admin-dashboard/admin-dashboard.module').then(x => x.AdminDashboardModule); const routes: Routes = [ { path: 'account', loadChildren: accountModule }, { path: 'onboarding', loadChildren: onboardingModule }, { path: 'member-dashboard', loadChildren: memberDashboardModule }, { path: 'admin-dashboard', loadChildren: adminDashboardModule }, // otherwise redirect to home { path: '', redirectTo: 'member-dashboard', pathMatch: "full" } ]; @NgModule({ imports: [RouterModule.forRoot(routes, {enableTracing: true})], exports: [RouterModule] }) export class AppRoutingModule { }

成员仪表板模块的路由如下：

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { LayoutComponent } from './layout/layout.component'; import { UpdateProfileComponent } from './update-profile/update-profile.component' import { ViewTeamsComponent } from './view-teams/view-teams.component' import { CreateTeamComponent } from './create-team/create-team.component'; import { UpdateTeamComponent } from './update-team/update-team.component'; import { ViewNotificationsComponent } from './view-notifications/view-notifications.component'; const routes: Routes = [ { path: '', component: LayoutComponent, children: [ { path: 'profile', component: UpdateProfileComponent }, { path: 'notifications', component: ViewNotificationsComponent }, { path: 'teams', component: ViewTeamsComponent }, { path: 'teams/create-team', component: CreateTeamComponent }, { path: 'teams/update-team', component: UpdateTeamComponent }, { path: '', redirectTo: 'profile', pathMatch: 'full' }, ] } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class MemberDashboardRoutingModule { }

布局只是处理公共视觉/样式框架（标题，侧边栏等）内的子显示

 <div class="full-screen-container"> <router-outlet></router-outlet> </div>

我希望用户浏览根目录（例如 http://localhost:8081）或不是 /member-dashboard、/admin-dashboard、/account 或 /onboarding 的任何内容，例如（http://localhost:8081/notExpectedPath ) 被重定向到 http://localhost:8081/member-dashboard/profile。 不过，当我输入 http://localhost:8081 时，我会被重定向到 http://localhost:8081/profile。

你能帮我弄清楚吗？

Answer 1

发生的事情是您没有匹配“whatever”的规则，因此路由器正在检查您设置的所有规则，没有找到任何匹配项，并且正在激活最后一个规则。

您需要一条“包罗万象”的路线。 有关说明，请参见此处。

要实现您的要求，您只需添加一个额外的路由作为数组中的绝对最后一个：

{ path: '**', redirectTo: '/member-dashboard' }