角度

Question

我已将通配符路由添加到我的应用程序中。 问题是添加通配符后。

我不确定是什么问题！  在id下面的路径数组：

const appRoutes: Routes = [
    { path: 'login', redirectTo: '/login', pathMatch: 'full' },
    { path: 'settings', redirectTo: '/settings', pathMatch: 'full' },        
    { path: '**', component: PageNotFoundComponent }       
];

登录和设置是模块，它们有自己的路由文件。 在添加通配符和默认路由之前，启动时应用程序被重定向到登录屏幕。

但现在每个网址都被重定向到PageNotFoundComponent。

  

配置中的路由顺序很重要，这是由   设计。路由器在匹配时使用第一匹配胜利策略   路线，所以更具体的路线应放在不太具体的路线上   路线。在上面的配置中，具有静态路径的路由是   首先列出，然后是空路径路径，匹配   默认路线。通配符路由是最后一个因为它匹配每个   只有在没有首先匹配其他路由时才应选择URL。

请指导！ 感谢

Answer 1

使用它：确保您按如下所示创建了所有组件

永远不要将通配符路由保留在第一个位置，因为它始终将通配符路径作为默认路径。

const appRoutes: Routes = [
    { path: '', component:AppComponent},
    { path: 'login', component:LoginComponent},
    { path: 'settings', component:SettingsComponent},
    { path: '**', component: PageNotFoundComponent }
];

尝试将RouterModule导入为RouterModule.forRoot(routes, { useHash: true })

Answer 2

通配符路由必须是数组中的 last 。现在，当您的应用程序启动时，路径为空，因此路由器将路由到与应用程序路由匹配的第一个特定路径，即通配符路由。当您更改订单以使通配符路由是最后一个时，当您的应用程序启动时，它将看到它需要重定向到空路径上的登录， BEFORE 它会看到通配符路由并且它将按预期工作。其次，不要重定向到同一条路线。对每个以组件为目标的路径使用特定组件。像这样更新你的路线数组。

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'settings', component: SettingsComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full'},
  { path: '**', component: PageNotFoundComponent }
];

修改

OP表示他们希望为他们在App中使用的不同功能模块使用单独的路由模块。为此，您有两个我知道的选项。您可以使用Lazy Loading， OR ，您可以在自己的路由模块中声明与每个功能模块相关的路由，然后将 IMPORT 功能模块声明到您的应用中。模块。该方法在以下stackblitz中进行了演示：https://stackblitz.com/edit/angular-q8mkac

Answer 3

请使用组件而不是通配符：

 { path: 'login', component: LoginComponent , pathMatch: 'full'}