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'}

角度

3 个答案: