Angular 在 URL 中使用 %2F 的路由正在中断路由

Question

我的应用程序中存在路由问题。如果我自己写 url ，路由就可以正常工作。但是，如果我像普通用户一样点击，它不会将我重定向到好的路线。

app.routing.ts


export const AppRoutes: Routes = [
    {
        path: 'pages',
        loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
    },    
    { path: '', redirectTo: 'pages', pathMatch: 'full' },
    { path: '**', redirectTo: 'pages' },
  
];

app.module.ts

...
imports: [
RouterModule.forRoot(AppRoutes, { relativeLinkResolution: 'legacy', onSameUrlNavigation: 'reload' })
]

pages.routing.ts

export const PagesRoutes: Routes = [{
  path: '',
  component: FullComponent,
  children: [
    {
      path: 'dashboard1',
      component: Dashboard1Component,
      data: {
        title: 'Dashboard 1',
        urls: [
          { title: 'Dashboard', url: '/pages/dashboard1' },
          { title: 'Dashboard 1' }
        ]
      }
    },
    {
      path: 'groups',
      component: GroupsComponent,
      data: {
        title: "Groupes/Utilisateurs",
        urls: [
          { title: 'MENU-ITEMS.dashboard', url: '/pages/dashboard1' },
          { title: "MATERIAL-ROUTING.groupAndUserManagement" }
        ]
      }
    }
],
}];

菜单-items.ts

{
        state: '/pages/dashboard1',
        name: 'MENU-ITEMS.dashboard',
        type: 'link',
        icon: 'dashboard'
  
    },
    {
      state: '/pages/namespaces',
      name: 'MENU-ITEMS.FUNCTIONALITY.projects',
      type: 'link',
      icon: 'view_in_ar'
    },

所以，当我启动我的应用程序时，它会将我重定向到 /pages/dashboard1 并显示它。但是如果我点击我的菜单将我重定向到 /pages/namespaces 它会生成一个 link 像这样： http://localhost:4200/%2Fpages%2Fnamespaces

所以我认为问题出在 %2F，因为如果我转到 http://localhost:4200/pages/namespaces 它可以正常工作。

我看到了一些与 %2F 相关的主题，但是很老了，我找不到任何解决方案.. 我正在使用 Angular 11。感谢您的帮助

编辑： vertical-sidebar.component.html（菜单）

<mat-nav-list appAccordion>
  <mat-list-item
    appAccordionLink
    *ngFor="let menuitem of menuItems.getMenuitem()"
    routerLinkActive="selected"
    group="{{ menuitem.state }}"
    (click)="scrollToTop()"
  >
    <a
      class=""
      appAccordionToggle
      [routerLink]="['/', menuitem.state]"
      *ngIf="menuitem.type === 'link'"
    >
      <mat-icon>{{ menuitem.icon }}</mat-icon>
      <span>{{ menuitem.name | translate }}</span>
      <span fxFlex></span>
      <span
        class="label label-{{ badge.type }}"
        *ngFor="let badge of menuitem.badge"
        >{{ badge.value }}</span
      >
    </a>

    <a
      class=""
      appAccordionToggle
      href="{{ menuitem.state }}"
      *ngIf="menuitem.type === 'extLink'"
    >
      <mat-icon>{{ menuitem.icon }}</mat-icon>
      <span>{{ menuitem.name | translate }}</span>
      <span fxFlex></span>
      <span
        class="label label-{{ badge.type }}"
        *ngFor="let badge of menuitem.badge"
        >{{ badge.value }}</span
      >
    </a>
    <a
      class=""
      appAccordionToggle
      href="{{ menuitem.state }}"
      target="_blank"
      *ngIf="menuitem.type === 'extTabLink'"
    >
      <mat-icon>{{ menuitem.icon }}</mat-icon>
      <span>{{ menuitem.name | translate }}</span>
      <span fxFlex></span>
      <span
        class="label label-{{ badge.type }}"
        *ngFor="let badge of menuitem.badge"
        >{{ badge.value }}</span
      >
    </a>

    <a
      class=""
      appAccordionToggle
      href="javascript:;"
      *ngIf="menuitem.type === 'sub'"
    >
      <mat-icon>{{ menuitem.icon }}</mat-icon>
      <span>{{ menuitem.name | translate }}</span>
      <span fxFlex></span>
      <span
        class="label label-{{ badge.type }}"
        *ngFor="let badge of menuitem.badge"
        >{{ badge.value }}</span
      >
      <mat-icon class="dd-icon">keyboard_arrow_down</mat-icon>
    </a>
    <mat-nav-list class="sub-item" *ngIf="menuitem.type === 'sub'">
      <mat-list-item
        *ngFor="
          let childitem of menuitem.children;
          let j = index;
          let i = childitem
        "
        routerLinkActive="selected"
      >
        <a
          [routerLink]="['/', menuitem.state, childitem.state]"
          *ngIf="childitem.type === 'link'"
          class="relative"
          routerLinkActive="selected"
          (click)="itemSelect[i] = j"
          >{{ childitem.name | translate }}</a
        >
      </mat-list-item>
      <mat-list-item
        *ngFor="
          let childitem of menuitem.children;
          let j = index;
          let i = childitem
        "
      >
        <a
          class=""
          href="javascript: void(0);"
          *ngIf="childitem.type === 'subchild'"
          (click)="itemSelect[i] = j"
          [ngClass]="j == itemSelect[i] ? 'selected' : ''"
        >
          <span>{{ childitem.name | translate }}</span>
          <span fxFlex></span>
          <mat-icon class="dd-icon">keyboard_arrow_down</mat-icon>
        </a>
      </mat-list-item>
    </mat-nav-list>

    <div class="saperator text-muted" *ngIf="menuitem.type === 'saperator'">
      <span>{{ menuitem.name | translate }}</span>
    </div>
  </mat-list-item>
</mat-nav-list>

Answer 1

问题很可能是由状态参数中存在“/”符号引起的。除了父路由之外，“/”符号被解释为路由的一部分而不是分隔符，因此被写为“%2f”。确保状态参数中不包含“/”应该可以解决问题

[routerLink]="['/', menuitem.state, childitem.state]"

Angular 在 URL 中使用 %2F 的路由正在中断路由

Angular routing using %2F in URL which is breaking routing

url-routing

angular