Aurelia 路由 - 使用 Webpack Dev Server 时使用 F5 重新加载网站会导致错误的捆绑 URL

Question

我是 Aurelia 的新手，一直坚持使用 pushState 选项正确设置路由。我有两条路线（一条用于列表视图，一条用于详细信息视图）。当我加载 http://localhost:8080 时，包被正确加载：

但是，当我简单地按 F5 重新加载页面时 http://localhost:8080/applicants/1 是地址栏中的当前 URL，然后捆绑包没有正确加载，因为现在 applicants 是捆绑包的一部分 URL:

我的路由器配置是这样的：

import { RouterConfiguration } from 'aurelia-router';
import { PLATFORM } from "aurelia-framework";

export class App {
    
    configureRouter(config: RouterConfiguration): void {

        config.options.pushState = true;
        config.options.root = '/';
        config.map([
            {
                route: '',
                name: 'applicants',
                moduleId: PLATFORM.moduleName('./applicant-list/applicant-list'),
                title: 'Applicants'
            },
            {
                route: 'applicants/:id',
                name: 'applicant-detail',
                moduleId: PLATFORM.moduleName('./applicant-detail/applicant-detail'),
                title: "Applicant Detail"
            }
        ]);
    }
}

列表视图仅使用常规 HTML 标签进行导航：

<template>
    <h1>Applicant List</h1>
    <ul>
        <li>
            <a href="/applicants/1">Applicant 1</a>
        </li>
        <li>
            <a href="/applicants/2">Applicant 2</a>
        </li>
    </ul>
</template>

详细视图的实现应该无关紧要，但无论如何：

export class ApplicantList {

    id: number;

    activate(queryParameters: { id: number }): void {
        this.id = queryParameters.id;
    }
    
}

我在 Aurelia Routing Documentation, nor in their Contact Manager Tutorial 中找不到任何有用的信息。当我切换到基于哈希的路由时它工作正常。

提前感谢您的帮助。

Answer 1

写完这个问题后不久，我意识到 HTML 元标记 base 不是由 Aurelia CLI 配置的。要修复它，请转到 webpack.config.js 并搜索包含 const baseUrl = '' 的行。这应该更改为 const baseUrl = '/'。您可能必须重新启动 Webpack Dev Server 才能生效（npm run start 或 yarn start）。

Aurelia 路由 - 使用 Webpack Dev Server 时使用 F5 重新加载网站会导致错误的捆绑 URL

Aurelia Routing- Reloading the Web Site with F5 results in wrong bundle URLs when using Webpack Dev Server

webpack

aurelia