Aurelia：子路由器导航：找不到路由答案

【问题标题】：Aurelia: Child Router Navigation: Route not foundAurelia：子路由器导航：找不到路由
【发布时间】：2015-12-17 17:51:05
【问题描述】：

以下是我的看法： 1.app - 标准 2. home - 左侧有一个项目列表，选择任何一个，将在路由器视图的右侧显示一些内容（要加载的合同视图）。 3.contract-view

app.ts：路由配置：

configureRouter(config: RouterConfiguration, router: Router) {
        config.title = 'Contracts Portal';
        config.map([
            { route: ['', 'home'], name: 'home', moduleId: 'home', nav: true, title: 'Home' },
            { route: 'resources', name: 'resources', moduleId: 'resources', nav: true, title: 'Resources' },
            { route: 'tools', name: 'tools', moduleId: 'tools', nav: true, title: 'Tools' }
        ]);
        this.router = router;
    }

Home.ts 路由器配置：

configureRouter(config: RouterConfiguration, router: Router) {
        config.title = "test";
        config.map([
            { route: ['', 'contract-view/:id'], name: 'contract-view', moduleId: 'contract-view', nav: true, title: 'Test' } 
        ]);
        this.router = router;
    }

在主页列表中选择一个项目时，我正在尝试如下导航以在右窗格的路由器视图中加载内容home.ts：

this.router.navigateToRoute("contract-view", { id: 4090 });

但是它抛出错误：找不到路由：/contract-view/4090

此时，它仍然是主页和默认路由，因此 url 显示为：http://localhost:9000/#/ 所以它失败了。但是，如果我手动将 url 更改为 http://localhost:9000/#/home 然后选择一个列表项，导航到合同视图就可以了。我在这里错过了什么？

我正在寻找绝对路径导航。尝试导航到 home/contract-view 但失败并出现错误：找不到名为“home/contract-view”的路由。检查名称：home/contract-view 已在路由配置中指定。

【问题讨论】：

标签： aurelia

【解决方案1】：

Home.ts的默认路由有一个参数：

config.map([
     { route: ['', 'contract-view/:id'], name: 'contract-view', moduleId: 'contract-view', nav: true, title: 'Test' } 
]);

这可能是个问题，因为参数 :id 没有在名字中引用。所以，我建议你改变路线如下：

config.map([
     //create another route with no parameters,
     //this route will represent an empty selection of contract
     { route: [ '', 'contract-view' ], name: 'contract-view-empty', moduleId: 'contract-view-empty', Title: 'Select a Contract' } 
     { route: 'contract-view/:id', name: 'contract-view', moduleId: 'contract-view', nav: true, title: 'Test' } 
]);

然后，要生成导航链接，您可以使用route-href attr。像这样：

<a route-href="route: contract-view; params.bind: { id: 4090 }">Navigate</a>

希望对你有帮助！

【讨论】：

默认导航没问题。仅当我使用以下方法从 viewmodel 导航时才会出现此问题：this.router.navigateToRoute("contract-view", { id: 4090 }); 它尝试在 url 仍读取 /#/ 时进行相对导航。
另外，我并没有真正的标签，而是一个不响应 route-href 的 div。所以，我正在使用 click.delegate="$parent.select(contract)" 并且在选择功能中，我正在导航。
请提供包含div和select函数的html
`
- ...
`
你能用a吗？ <ul> <li repeat.for="contract of contracts" > <a click.delegate="$parent.select(contract)"></a> </li> </ul>

【解决方案2】：

这是 Aurelia 路由器框架的问题。讨论和解决方法在这里： https://github.com/aurelia/skeleton-navigation/issues/230

【讨论】：