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

现在当我打开像unofficial package这样的链接时，它运行正常，如果我刷新页面，它仍然有用。

如果我点击链接打开详细信息页面http://myapp.com/projects，也可以正常使用。但是在刷新此详细信息页面时，浏览器将变为空白

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

控制台中的

错误消息

我错过了一些明显的东西吗？是否有配置设置可以使用/：id像路由一样刷新页面？

代码在github http://myapp.com/projects/9348，你可以像往常一样克隆并运行

au run --watch

感谢您的帮助

编辑：它与

有什么关系

config.options.pushState = true;

在app config中？

Answer 1

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

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

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

Answer 2

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

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

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

此序列的工作原因与Aurelia如何解析路线有关。

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

关于这一点的重要部分是，通过执行此序列，Aurelia有机会在projects-list 上调用configureRouter方法（从（2）开始，它导航再次相对于应用程序根目录ProjectSection。因此，将存在可以用于对网址的配置。

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

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

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

ProjectSection

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

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中的

一切都将开始工作。

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

4 个答案: