角度路由未打开所需的默认 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”的规则，因此路由器正在检查您设置的所有规则，没有找到任何匹配项，并且正在激活最后一个。

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

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

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