Angular 19中使用<a>元素时路由功能失效问题求助

我最近在做一个简单的Angular应用练手，结果卡在路由这块了，实在没办法来求助！我没有使用独立组件，项目里专门建了个app.routing.module，代码如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MonthDetailComponent } from './containers/month-detail/month-detail.component';
import { BudgetEntryComponent } from './components/budget-entry/budget-entry.component';

const routes: Routes = [
  { path: 'month/:id', component: MonthDetailComponent },
  { path: 'budget-entry', component: BudgetEntryComponent },
  { path: '', redirectTo: '/month/current', pathMatch: 'full' }
];

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

我在组件模板里用普通的<a>标签做跳转，比如写<a href="/month/2024-09">查看九月预算</a>，结果点击之后完全没反应，要么就是直接触发页面刷新，甚至跳转到404页面，完全不是Angular单页应用路由该有的表现。

后来我试了用Angular自带的routerLink指令，写成<a routerLink="/month/2024-09">查看九月预算</a>是能正常跳转的，但我有些场景下需要用普通的<a>标签，或者动态生成的链接，怎么才能让Angular路由接管这些普通<a>的跳转行为呢？

我已经自己排查了几个点：

• 确认AppRoutingModule已经正确导入到AppModule中
• 反复检查了路由路径的拼写，没有错误
• 试过在路由配置里加上useHash: true，但普通<a>还是不行

有没有大佬遇到过类似的问题，给我指个方向？

内容来源于stack exchange