Aurelia 路由器导航和导航到路由答案

【问题标题】：Aurelia router navigate & navigateToRouteAurelia 路由器导航和导航到路由
【发布时间】：2016-05-02 08:06:03
【问题描述】：

在 app.ts 中，我正在寻找导航到 home/contract-view/10 的操作。试过了

this.router.navigateToRoute(`home/contract-view`, { id: 10}, { absolute: true });

Route home/contract-view not be found 失败

再试一次：

this.router.navigate(`#/home/contract-view`, { id: 10});

以Route not found: contract-view(…) 失败如何做到这一点？ App.ts：

configureRouter(config: RouterConfiguration, router: Router) {
        config.title = 'Contracts Portal';
        config.map([
            { route: ['', 'dummy'], name: 'dummy', moduleId: 'dummy', nav: false, title: 'Dummy', settings: { pos: 'left' } },
            { route: 'home', name: 'home', moduleId: 'home', nav: true, title: 'Home', settings:{pos: 'left', class: 'home' }, auth: true },
        ]);
        this.router = router;    
    }

Home.ts：

 configureRouter(config: RouterConfiguration, router: Router) {
        config.map([
            { route: ['', 'contract-view/:id'], name: 'contract-view', moduleId: 'contract-view', nav: true, title: 'Contract' },
            { route:  'doc-view/:id', name: 'doc-view', href:'doc-view', moduleId: 'doc-view', nav: true, title: 'Document' },
        ]);

        this.router = router;
        this.router.refreshNavigation();
    }

【问题讨论】：

标签： aurelia

【解决方案1】：

首选的解决方案是使用您在路由器中配置的命名路由。

this.router.navigateToRoute('contract-view', {id: 10});

【讨论】：

@weagle08 - 你能举个例子吗？如果您尝试导航到片段 'users/:id/detail' 中的子路由 'detail'，您希望用什么来调用 navigateToRoute？大概你必须在子路由器上调用它才能让它工作，这不是很好。
这正是我所做的：从子路由器调用它。上面提到的这种方法有什么问题？

【解决方案2】：

您在“家”中配置了contract-view/:id 的路由器，因此您需要this.router.navigate('home/contract-view/10')。并尝试删除this.router.refreshNavigation()

【讨论】：

使用字符串插值技巧可能会更好。 this.router.navigate(`home/contract-view/${yourIdVariable}`)，但我认为@weagle08 的答案更易于维护。

【解决方案3】：

感谢@valichek，只需让它this.router.navigate('/home/contract-view/10') 就可以工作。开头那额外的/ 有所作为。

【讨论】：