以角度为每条路线加载通配符

Question

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

我不确定是什么问题！ 下面是路由数组：

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

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

但是现在每个 url 都被重定向到 PageNotFoundComponent 。

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

请指导！ 谢谢

Answer 1

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

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

编辑

OP 表示他们希望为他们在应用程序中拥有的不同功能模块使用单独的路由模块。为此，您有两个我知道的选择。您可以使用Lazy Loading，或您可以在其自己的路由模块中声明与每个功能模块有关的路由，然后将功能模块导入到您的 app.module 中。该方法在以下堆栈闪电战中得到了演示：https://stackblitz.com/edit/angular-q8mkac

Answer 2

像这样使用它：确保您已按如下方式创建所有组件

永远不要将通配符路径放在首位，因为它总是将通配符路径作为默认路径。

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

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

Answer 3

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

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