为什么我在 URL 的开头获得符号"?"并在导航绝对路径时重新启动应用程序？

Question

我有问题。

我有一个带有延迟加载的多模块应用程序。当我从顶部模块导航到底部子模块时，一切都很好。但是，当我试图从一个底层的子懒惰模块路由到另一个子懒惰模块时，我会得到奇怪的行为。

没关系：

=> http://localhost:4200/#/op/services/ =>
=> http://localhost:4200/#/op/services/management/ =>
=> http://localhost:4200/#/op/services/management/edit/123
=> http://localhost:4200/#/op
=> http://localhost:4200/#/op/test/management/
=> http://localhost:4200/#/op/test/management/edit/321

这很糟糕：

http://localhost:4200/#/op/test/management/edit/321 =>
=> http://localhost:4200/#/op/services/management/edit/123

当我尝试时，我得到了"？"登录开始URL，如

http://localhost:4200/?#/op/services/management/edit/123

我的应用程序被完全重新加载！

不管是否加载了懒惰模块，正如我发现的那样，这不会影响问题。

这个问题反复出现不稳定，有时过渡工作如预期！我试了很多组合，但问题解决不了。

我试过的：

this.router.navigate([op/services/management/edit/${id}]);
this.router.navigate([/op/services/management/edit/${id}]);
this.router.navigate(['/op/services/management/edit/', id]);
this.router.navigateByUrl(op/services/management/edit/${id});
this.router.navigateByUrl(/op/services/management/edit/${id});
routerLink = "/op/services/management/edit/123"
routerLink = "op/services/management/edit/123"

帮助我理解路线更改的原因？

更新。

添加smiplify路由配置：

基本模块：

const routes: Routes = [
{
path: '', loadChildren: './path/to/op.module#OperatorModule',
data: {
preload: false,
base: true,
},
},
...
];
@NgModule({
imports: [RouterModule.forRoot(
routes,
{
useHash: true,
preloadingStrategy: SelectivePreloadingStrategy,
},
)],
exports: [RouterModule],
})
export class AppRoutingModule {}

包含我的内部懒惰模块的操作员模块：

const routes: Routes = [
{
path: 'op',
component: BasePage,
canActivate: [AuthGuard],
children: [
{
path: 'services/management',
loadChildren: './services/services.module#ServicesModule',
canActivate: [AuthGuard],
data: {
preload: true,
},
},
{
path: 'tests/management',
loadChildren: './tests/tests.module#TestsModule',
canActivate: [AuthGuard],
data: {
preload: true,
},
},
...
],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class OperatorRoutingModule {
}

一些内部模块的路由器模块：

服务：

const routes: Routes = [
{
path: '',
data: {
...
},
pathMatch: 'full',
component: ServicesPage,
canActivate: [AuthGuard],
},
{
path: 'edit/:id',
data: {
accessRole: [UserRole.USER, UserRole.ADMIN],
},
component: ServicePage,
canDeactivate: [CanDeactivateGuard],
canActivate: [AuthGuard, RoleGuard],
},
....
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ServicesRoutingModule {
}

用于测试：

const routes: Routes = [
{
path: '',
data: {
...
},
pathMatch: 'full',
component: TestsPage,
canActivate: [AuthGuard],
},
{
path: 'edit/:id',
data: {
accessRole: [UserRole.USER, UserRole.ADMIN],
},
component: TestPage,
canDeactivate: [CanDeactivateGuard],
canActivate: [AuthGuard, RoleGuard],
},
....
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class TestsRoutingModule {
}

更新！

我找到了一个新的理由。如果我尝试以HTML形式进行路由，就会出现问题。我有一个关于离开页面的CanDeactivate服务警告。我注意到window:befeoreonload适用于任何表单，即使在此页面上禁用了CanDeactivate服务。

我还不明白，它是如何依赖的，但我认为，我走的是正确的路。

Answer 1

route按钮有一个默认类型，即"submit"，其按钮的形式为。。。将其更改为type='button'，一切正常！