我的 app-routing.module.ts 包含導致不同 id 的引數路由。我在測驗我的路線時發現我的通配符路徑被破壞了。
經過大量測驗，事實證明在引數路徑下方使用不同的路由也不起作用。
app-routing.module.ts（原始設定）
const routes: Routes = [
{
path: '',
pathMatch: 'full',
loadChildren: () =>
import('./features/home/home.module').then((m) => m.HomeModule),
},
{
path: 'about',
loadChildren: () =>
import('./features/about/about.module').then((m) => m.AboutModule),
},
{
path: 'contact',
loadChildren: () =>
import('./features/contact/contact.module').then((m) => m.ContactModule),
},
{
path: ':id',
loadChildren: () =>
import('./features/profile/profile.module').then(
(m) => m.ProfileModule
),
},
// PATH BELOW NOT WORKING ??
{
path: '**',
redirectTo: '',
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
initialNavigation: 'enabledBlocking',
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}
app-routing.module.ts（通過交換一些路徑設定進行測驗）
const routes: Routes = [
{
path: '',
pathMatch: 'full',
loadChildren: () =>
import('./features/home/home.module').then((m) => m.HomeModule),
},
{
path: ':id',
loadChildren: () =>
import('./features/profile/profile.module').then(
(m) => m.ProfileModule
),
},
// PATH BELOW NOT WORKING ??
{
path: 'about',
loadChildren: () =>
import('./features/about/about.module').then((m) => m.AboutModule),
},
{
path: 'contact',
loadChildren: () =>
import('./features/contact/contact.module').then((m) => m.ContactModule),
},
{
path: '**',
redirectTo: '',
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
initialNavigation: 'enabledBlocking',
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}
uj5u.com熱心網友回復：
首先，redirectTo路由必須包含一個pathMatch屬性，否則它不會路由（它甚至不應該編譯）
接下來，像這樣在同一級別提供路線是一種不好的做法
/home/about
/home/contact
/home/:id
從技術上講，它可以作業，但因為它依賴于提供的路線的順序。如果您的:id路線首先在串列中設定，然后about也contact成為 ID。
所以最好的解決方案是像這樣分開路線
/home/about
/home/contact
/home/items/:id
否則，您可以使用canMatch警衛（如canActivate），但同樣，我認為這是一種不好的做法。只需為您的路線遵循類似 RESTFul 的結構，這是最好和最簡單的選擇。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/516531.html
上一篇：添加或隱藏分隔符的正確簡潔方法
下一篇：逆向工程C目標檔案