如何在Aurelia中访问子路由器？

Question

我有两个子路由器。我可以从一个导航到另一个。但是从子路由器视图中，如何导航？

以下代码行给出了父路由器实例。

import {Router} from 'aurelia-router'

如何获取子路由器实例？

注：子路由器实例需要在应用程序代码中定义并声明。

- Joe

---

你想要导航到哪里，为什么不能使用注入的路由器来实现？ - dfsq

我必须在子路由器中导航。我不确定如何从视图模型访问注入的路由器。 - Joe

在子视图模型中，通常会执行 import {Router} from 'aurelia-router'; 然后将其注入到类中，并像这样使用它 this.router.navigate('child2')。与正常的路由相比，这里没有什么不同。 - dfsq

我也做了同样的事情。但它给出的是父路由器的实例引用，而不是子路由器的。不确定我在这里漏掉了什么。 - Joe

是的，它提供了相同的路由器实例，但您仍然可以在任何您想要的路由之间导航，包括子-子级别和子-父级别。您能否发布一些代码，说明您如何尝试重定向？ - dfsq

Answer 1

要创建子路由器，可以在与父级路由器相同的方式下，在子路由上创建一个新的路由器。然后，将路由器设置为视图模型类的属性，以便您可以在整个视图模型中访问它。

import { Router } from 'aurelia-router';

class ChildViewModel() {  
    configureRouter(config, router) {
        this.router = router;
        // router config
    }
    someOtherFunction() {
        this.router.navigate('somewhere');
    }
}

如果您想在另一个视图模型中使用子路由器，则可以导入它并在类上使用路由器（假设该类是单例，除非您进行其他配置）。

import { inject } from 'aurelia-framework';
import { ChildViewModel } from './child-view-model';

@inject(ChildViewModel)
class AnotherViewModel() {
    constructor(cvm) {
        this.externalRouter = cvm.router;
    }
    doStuff() {
        this.externalRouter.navigate('somewhere');
    }
    doOtherStuff() {
        ChildViewModel.router.navigate('somewhere else');
    }
}

- Matthew James Davis

---

Matt，你的建议不起作用。路由未找到。 - John Manko

谢谢约翰。这份代码不会按行工作，因为我虚构了像“某个地方”和“别的地方”的假路径。你遇到的错误表明你正在尝试导航到路由器中未定义的路由。如果你需要更多帮助，请在 Gitter、Twitter 或电子邮件上找我，我们会一起查看你的代码。 - Matthew James Davis

Answer 2

我的朋友帮我解决了这个问题。在第一个路由器导航的子路由器上，我留空了''，它采用了像localhost:9000/这样的URL。当我试图从那里导航时，我遇到了问题。所以从第一次导航开始，我改变了代码，像childrouter/name这样路由，然后它就可以工作了。

- Joe