Question

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

app.ts：route Config：

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

此时，它仍然是主页和默认路由，因此网址为：http://localhost:9000/#/ 所以它失败了。但是，如果我手动将网址更改为http://localhost:9000/#/home然后选择列表项，则导航到合约视图会起作用。我在这里错过了什么？

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

Answer 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>

希望它有所帮助！

Answer 2

这是Aurelia Router框架的一个问题。讨论和解决方法： https://github.com/aurelia/skeleton-navigation/issues/230

Aurelia：子路由器导航：未找到路由

2 个答案: