angular - 在破坏路由的 URL 中使用 %2F 的角度路由
问题描述
我的应用程序中的路由有一些问题。如果我自己编写 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" }
]
}
}
],
}];
菜单项.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 它会生成一个这样的链接: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>
解决方案
该问题很可能是由状态参数中存在“/”符号引起的。除了父路由之外,'/' 符号被解释为路由的一部分而不是分隔符,因此被写为 '%2f'。确保状态参数中不包含“/”应该可以解决问题
[routerLink]="['/', menuitem.state, childitem.state]"
推荐阅读
- javascript - 扁平化字符串字典和字典
- javascript - What technologies are used in the editor of Canva
- python - 训练问题,Val 损失和准确率不变
- airflow - 如何计算 Airflow DAG 的总执行时间
- ethereum - web3.eth.getAccounts(); 当前不工作
- javascript - 使用 Ruby 与 Cytoscape.js API 交互
- python - 我需要删除python中大于1的列表元素
- java - 如何在Java中分配内部类数组?
- bash - 在bash中自动输入初始输入后等待用户输入
- java - 从 Jdeveloper 加载 Jasper 报告