刷新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;
    }
}

现在，当我打开像http://myapp.com/projects这样的链接时，它工作正常，如果我刷新页面，它仍然有效。

如果我单击一个链接打开详细页面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

我不知道你的问题是否已经解决。但是，这是与pushState被设置为true。我自己以前遇到过这个问题。这与Aurelia如何为页面加载JS有关。我无法解决它（虽然我承认我只看了大约20分钟）。但是从我看到的你需要配置一些设置来使这项工作。

好。这将有助于http://aurelia.io/docs/routing/configuration#options。 Baiscally：

• 将<base href="http://localhost:9000">添加到index.html以重定向从基本URL加载内容。其余的配置可以像你保留的一样。
• 还要在路由器配置中添加config.options.root = '/'

Answer 2

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

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

1. 导航到projects-list组件（相对于该部分路线的''路线，即相对于应用程序的projects/）
2. 刷新同一页面
3. 导航到详细信息页面。

这个序列起作用的原因与Aurelia如何解析路线有关。

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

关于这一点的重要部分是，通过执行此序列，Aurelia有机会在configureRouter上调用ProjectSection方法（从（2）开始，它再次导航到相对于app根的projects/）。因此，将存在可以针对URL使用的配置。

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

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

---

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

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

并看看它是否有效（我不确定 - 我试图向你提供一个理由，但我现在没有办法尝试重现它）。

Answer 3

尝试在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 4

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

从Rud156的提示和回答这个问题How to remove # from URL in Aurelia我刚刚补充

<base href="/">

在index.html文件中，一切都按预期工作。

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

1-当您在克隆之后运行应用程序时，一切都运行良好。

2-如果你添加

config.options.pushState = true;

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

3-添加

<base href="/">

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