Angular 18 路由/URL

Question

我目前正在探索 Angular 18，并注意到有时当应用程序路由到组件而不是主页上时；

1. 如果我刷新，它会将我带回主页，而不是重新加载当前路线。例如，我在这条路线“example.com/account/settings”上并刷新，它带我回到“example.com”并给我一个空白屏幕。

2. 当我在一条路线上单击另一条路线时，它会重新加载当前路线而不是加载新路线。例如，我在这条路线“example.com/account/settings”上，然后单击另一条路线“example.com/pricing”。它重新加载当前路线“example.com/account/settings”并给我一个空白屏幕。

可能存在我不知道的重大更改，并且我没有在网上看到与我遇到的问题相关的任何内容。

知道问题可能是什么吗？

注意：我的一些路线是延迟加载的，同样的方法在 Angular 16 及更低版本上运行良好。

我的组件 HTML

<a href="javascript:;" routerLink="pricing"><i class='bx bx-radio-circle'></i>

应用程序组件 HTML

<router-outlet />

我的路由模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PRICING_COMPONENT } from './pricing/pricing.component';
import { DASHBOARD_COMPONENT } from './dashboard/dashboard.component';

const routes: Routes = [
  {path: '', component: DASHBOARD_COMPONENT },
  {path: 'pricing', component: PRICING_COMPONENT },
  {
    path: 'account',
    // canActivate: [AuthGuard, SessionGuard, VerificationGuard],
    loadChildren: () => import('./lazy-loaded-account/lazy-loaded-account.module').then(
      module => module.LAZY_LOADED_ACCOUNT_MODULE
    )
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我的延迟加载路由文件

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PROFILE_COMPONENT } from './profile/profile.component';
import { SETTINGS_COMPONENT } from './settings/settings.component';

const routes: Routes = [
  {path: 'profile', component: PROFILE_COMPONENT},
  {path: 'settings', component: SETTINGS_COMPONENT},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LAZY_LOADED_ACCOUNT_ROUTING_MODULE { }

Answer 1

谢谢大家， 该问题源于将 href 和 routerLink 放在一起，如下所示。

<a href="javascript:;" routerLink="pricing">

我更改为以下内容，问题已解决。

<a routerLink="pricing">

@JSON Derulo 是对的

参考https://angular.dev/guide/routing/router-reference#router-links