Angular 避免路由参数 (:id) 并导航到特定 link

Question

在我们的项目中，如果激活维护模式，我必须实现导航或重定向到维护页面。我想在 AuthGuard 服务中执行此操作，并执行以下操作：

canActivate(...) {
    if (this.inMaintenance()) {        
    this._navController.navigateForward('settings-maintenance', { replaceUrl: true });
    return false;
    }
}

很遗憾，项目路由设置是这样的：

const routes: Routes = [
{
    path: '',
    loadChildren: () => import('./template/template.module').then((module) => 
    module.TemplatePageModule),
    canActivate: [AuthGuard],
},    
{
    path: 'settings-maintenance',
    pathMatch: 'full',
    component: SMaintenanceComponent,
},
{
    path: ':id',
    loadChildren: () => import('./template/template.module').then((module) => 
    module.TemplatePageModule),
    canActivate: [AuthGuard],
},
{
    path: ':id/:params',
    loadChildren: () => import('./template/template.module').then((module) => module.TemplatePageModule),
    canActivate: [AuthGuard],
},
];

所以，每当我尝试导航到设置维护时，它都会再次攻击路由守卫，因为它认为它是 path: ':id'。有没有办法避免这种情况？我想避免显示登录页面并在没有登录的情况下直接重定向到 SMaintenance 页面，但不知道该怎么做。否则，我将不得不在页脚左右检查维护模式，然后在登录后在那里进行重定向...

Answer 1

实际上，您的所有路径都将匹配第一个空路径。您始终需要包含带有空路径的 pathMatch: 'full'，否则它将匹配任何内容。我想没有人注意到，因为他们都加载了相同的模块....

const routes: Routes = [
{
    path: '',
    loadChildren: () => import('./template/template.module').then((module) => 
    module.TemplatePageModule),
    canActivate: [AuthGuard],
    pathMatch: 'full',
},
...

它应该按顺序检查路径匹配，所以它会在 :id 页面之前找到维护页面。

文档参考：https://angular.io/api/router/Route

The path-match strategy 'full' matches against the entire URL. It is important to do this when redirecting empty-path routes. Otherwise, because an empty path is a prefix of any URL, the router would apply the redirect even when navigating to the redirect destination, creating an endless loop.

没有 pathMatch: 'full' 的空路径通常作为最后一条路由出现，用于捕获任何不存在的路由，重定向或显示 404 页面。

Angular 避免路由参数 (:id) 并导航到特定 link

Angular avoid Route parameter (:id) and navigate to specific link

routes

routeparams

angular

auth-guard