Angular路由器只会把一些路由路由到404，不会把子错误路由到404

Question

目前，如果用户登录到我的网站并输入一个地址，如:

localhost/f0sjdf0sd

它会将它们路由到仪表板，因为它正在点击"**"。

但是如果他们碰到:

localhost/test/f0sjdf0sd

它就会呆在那里。注意，test是一个加载了子路径的路径。我试着添加到测试路由本身，但它仍然什么也没做。

知道为什么吗?

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';
// Import Containers
import { DefaultLayoutComponent } from './containers';
// MSAL import { AuthGuard } from './auth.guard';
/* MSAL */
import { BrowserUtils } from '@azure/msal-browser';
import { MsalGuard, MsalRedirectComponent } from '@azure/msal-angular';
/* MSAL END */
import { HomeComponent } from './views/home/home.component'
export const routes: Routes = [
{
path: '',
component: DefaultLayoutComponent,
data: {
title: 'Home',
},
children: [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{
path: "home",
component: HomeComponent,
data: {
title: 'Home',
},
canActivate: [MsalGuard], 
},
{
path: 'dashboard',
loadChildren: () =>
import('./views/dashboard/dashboard.module').then(
(m) => m.DashboardModule
),
// MSAL canActivate: [AuthGuard],
canActivate: [MsalGuard], 
},
{
path: 'test',
loadChildren: () =>
import('./views/test/test.module').then(
(m) => m.TestModule
),
canActivate: [MsalGuard], 
},
{ path: "**", redirectTo: "dashboard" },
],
},
];

@NgModule({
imports: [RouterModule.forRoot(routes, {
scrollPositionRestoration: 'top',
anchorScrolling: 'enabled',
relativeLinkResolution: 'legacy',
// Don't perform initial navigation in iframes or popups
initialNavigation: !BrowserUtils.isInIframe() && !BrowserUtils.isInPopup() ? 'enabledNonBlocking' : 'disabled' // Set to enabledBlocking to use Angular Universal
})],
exports: [RouterModule]
})
export class AppRoutingModule {}

Answer 1

您需要在基本级别定义重定向路径，如下所示:

export const routes: Routes = [
{
path: '',
component: DefaultLayoutComponent,
data: {
title: 'Home',
},
children: [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{
path: "home",
component: HomeComponent,
data: {
title: 'Home',
},
canActivate: [MsalGuard], 
},
{
path: 'dashboard',
loadChildren: () =>
import('./views/dashboard/dashboard.module').then(
(m) => m.DashboardModule
),
// MSAL canActivate: [AuthGuard],
canActivate: [MsalGuard], 
},
{
path: 'test',
loadChildren: () =>
import('./views/test/test.module').then(
(m) => m.TestModule
),
canActivate: [MsalGuard], 
},

],
},
{ path: "**", redirectTo: "dashboard" },
];

另一个可以使用的边注:在子数组上面的canActivateChild: [MsalGuard]来触发登录，而不需要在每个子数组中声明。