在 Aurelia 中刷新详细信息页面会导致空白

Question

我用 aurelia-cli 创建了一个新的示例应用程序。让我陷入困境的一个奇怪的行为是路由。这是我的主要路线。

{
   route: "projects",
   title: 'Project Section',
   name:'project-section',
   moduleId: './modules/projects/project-section',
   nav: true
}

这是我的项目部分文件

export class ProjectSection {
    configureRouter(config, router) {
    config.map([
        { route: '',    moduleId: './projects-list', nav: false, title: 'Projects List' },
        { route: ':id', moduleId: './project-detail', nav: false, title: 'Project Detail' }
    ]);
    this.router = router;
    }
}

现在当我打开 link 比如 http://myapp.com/projects 时，它工作正常，如果我刷新页面，它仍然有效。

如果我单击 link 打开详细信息页面 http://myapp.com/projects/9348 也可以正常工作。但是在刷新此详细信息页面时，浏览器变为空白

GET http://localhost:9000/projects/scripts/vendor-bundle.js net::ERR_ABORTED

控制台中的错误消息

我是不是遗漏了什么明显的东西？是否有一个配置设置可以使用 /:id 像路由一样刷新页面？

代码位于 github aurelia-sample，您可以像往常一样克隆和运行

au run --watch

感谢您的帮助

编辑：它与

有什么关系吗

config.options.pushState = true;

在应用配置中？

Answer 1

你缺少的一点是，（恕我直言，有点违反直觉），ProjectsSection 定义的子路线只有在你实际导航到 /projects 后才会生效。

换句话说，以下序列有效：

导航到projects-list组件（路由''相对段的路由，即projects/相对于应用）
刷新同一页面
导航到详细信息页面。

此序列起作用的原因与 Aurelia 解析路由的方式有关。

它首先尝试将您的路由与根配置相匹配。它看到 url 以 projects 开头。因此它会检查 projects 指向哪个组件。在您的情况下它是 ProjectSection ，因此它使用它并检查它是否在其上找到 configureRouter 方法。确实如此，因为您已经定义了一个，所以它会调用它。
从那时起，它将尝试与该配置匹配的路由是没有前缀的原始路由导致该组件。 projects/ 通向 ProjectSection，后面什么也没有，所以路由的其余部分是 /，根据您在 ProjectSection 中创建的配置解析。在你的情况下，这导致 projects-list.

关于此的重要部分是，通过执行此序列，Aurelia 有机会在 ProjectSection 上调用 configureRouter 方法 （因为在 ( 2)，它再次导航到相对于应用程序根目录的 projects/。因此，可以针对 url 使用的配置将存在。

在有问题的情况下，如果您立即导航到 /projects/:id，它将与根级别配置相匹配。没有匹配项，并且由于重新加载算作第一页加载，因此没有可回退的路由。这就是您收到错误的原因。

关于这个场景的重要部分是，与前一种情况相反，路由器跳过在 ProjectSection 上调用 configureRouter 方法。如果您在该方法中设置断点，您将看到它不会被调用。这就是为什么我将行为评论为 counter-intuitive，因为您（以及我，当我第一次遇到这个问题时）期望的行为是一个相当普遍的场景。

我不知道有任何官方方法可以解决这个问题，所以我的建议是您可以尝试在应用程序级配置中定义通配符路由，如下所示：

{ route: "projects/*", title: 'Project Section', name:'project-section', moduleId: './modules/projects/project-section', nav: true }

看看它是否有效（我不确定 - 我已尝试为您提供原因，但此时我没有办法尝试重现它）。

Answer 2

尝试在 ProjectSection configureRouter 函数中添加重定向路由（以您的示例为例）：

export class ProjectSection {
    configureRouter(config, router) {
        config.map([
            { route: '', redirect: 'list' }, // Redirects to the list route when no specific route in the project section is specified
            { route: 'list', moduleId: './projects-list', nav: false, title: 'Projects List' },
            { route: ':id', moduleId: './project-detail', nav: false, title: 'Project Detail' }
        ]);
        this.router = router;
    }
}

Answer 3

不知道你的问题有没有解决。但是，是的，这与 pushState 设置为 true 有关。我自己以前也遇到过这个问题。这与 Aurelia 如何为页面加载 JS 有关。我无法解决它（尽管我承认我只看了大约 20 分钟）。但据我所知，您需要配置一些设置才能使其正常工作。

好的。这将有助于 http://aurelia.io/docs/routing/configuration#options。拜斯卡利：

向 index.html 添加 <base href="http://localhost:9000"> 以重定向从基础 url 加载的内容。其余配置可以保持不变。
同时在您的路由器配置中添加 config.options.root = '/'

Answer 4

感谢您发布的所有答案。我终于解决了这个问题。我仍然不确定这是否正确，但这是有效的技巧。

根据 Rud156 的提示并回答这个问题我刚刚添加

<base href="/">

在 index.html 文件中，一切正常。

为了进一步调查这个问题，我克隆了 aurelia sample contact app

1- 当您运行克隆后的应用程序时，一切正常。

2- 如果您添加

config.options.pushState = true;

在src/app.js中，子路由将停止工作。

3- 添加

<base href="/">

在 index.html 中，一切都会开始工作。

在 Aurelia 中刷新详细信息页面会导致空白

refreshing a detail page in Aurelia results in blank

javascript

aurelia