为什么angular router使用routerLink指令重新加载页面

Question

我从Angular 10迁移到13，从Ionic 5迁移到6。

根据我目前的设置(Angular 13，Ionic 6(，我有一个奇怪的行为：当我使用routerLink指令导航到新页面时，新页面会重新加载，页面堆栈会丢失。

该行为与用户直接在导航栏中键入URL相同。

我试图找到类似的问题或方法来理解这种行为，但一无所获。

你能帮我吗？

路由器根配置：

RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules,
anchorScrolling: 'enabled',
enableTracing: false,
relativeLinkResolution: 'legacy'
})

链接按钮集成：

<ion-button [routerLink]="['/dashboard/targets']" [queryParams]="{s: 'community'}" ...>...</ion-button>

路由器子配置：

RouterModule.forChild([
{
path: 'targets',
loadChildren: () => import('./targets/targets.module').then( m => m.DashboardTargetsPageModule)
}
]),

Answer 1

Ionic 6中有一个错误，已在Ionic 6.0.16中解决，请尝试安装该版本。

npm install @ionic/angular@6.0.16

Answer 2

我发现，通过手动推送到路由器，可以防止这种行为(这也导致了我的根组件和Pinia存储的重新加载(。

请注意，我在vue 3项目中使用了@ionic/vue 7.1.3和@ionic/vue路由器7.1.3，但我认为这可能会解决您的问题。

例如，我替换了：

<ion-card :href="`locn/${locn.id}`">

带有：

<ion-card @click="navigateTo()">

在Vue脚本设置中：

import router from '@/router';
...
function navigateTo(): void {
router.push({ name: 'locn', params: { id: props.locn.id } });
}

在Angular中，您需要将navigateTo公开为公共函数或受保护函数。