Angular 18路由配置下页面刷新时资源路径被追加父组件相对路径的问题求助

各位大佬好，我最近在Angular 18项目里配置了嵌套路由，遇到一个刷新页面就触发的资源加载问题，想请教下大家怎么解决。

先贴出我的路由配置代码：

根路由配置（app.routes.ts） #

import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';

export const routes: Routes = [
    { path: '', component: LoginComponent },
    { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.routes').then(m => m.routes)}
];

仪表盘子路由配置（dashboard.routes.ts） #

import { Routes } from '@angular/router';

import { DashboardComponent } from './dashboard.component';
import { EventsComponent } from './components/events/events.component';
import { EventQuestionsComponent } from './components/events/eventQuestions/eventQuestions.component';
import { StatsComponent } from './components/stats/stats.component';

export const routes: Routes = [
    { path: '', component: DashboardComponent, children : [
            { path: '', component: StatsComponent },
            { path: 'events', component: EventsComponent },
            { path: 'events/questions', component: EventQuestionsComponent },
            { path: 'stats', component: StatsComponent }
        ]}
];

具体问题是：当我从登录页正常跳转到/dashboard、/dashboard/events这类子路由页面时，所有静态资源（CSS、JS、图片等）都能正常加载，但一旦在/dashboard/events页面刷新浏览器，控制台就会弹出一堆404错误。查看请求路径后发现，原本应该是/assets/css/main.css的资源，请求路径变成了/dashboard/assets/css/main.css——明显是资源路径被自动追加了父路由的前缀，导致找不到对应的文件。

目前我尝试把index.html里的资源引用从相对路径改成带斜杠的绝对路径后，问题暂时解决了：

<!-- 修改前 -->
<link rel="stylesheet" href="assets/css/main.css">
<!-- 修改后 -->
<link rel="stylesheet" href="/assets/css/main.css">

但我还有两个疑问想请教大家：

• 除了修改资源引用路径的写法，有没有更贴合Angular路由机制的解决方案？比如在路由配置层面做调整？
• 之前看到有人提到可以用APP_BASE_HREF来配置基础路径，这个方法具体怎么应用到我的场景里？

麻烦各位有经验的朋友帮忙指点下，感谢大家！

备注：内容来源于stack exchange，提问作者Binary Dharma