Javascript Aurelia JS-无法通过单击导航路由父级（未找到路由）？

我尝试更改联系人列表教程：

。。。以“单击我”按钮/div开始，然后按原样加载联系人列表应用程序的其余部分。为此，我：

• 已将旧的

  app.*

  复制到

  app clist.*

• 新的

  应用程序。*

  只有一个
  ，用于管理路由/导航
• 添加了

  btn start.*

  ，其中仅包含一个div，单击该div可导航至

  app clist

如图所示：

单击“单击此处开始！”文本后，Chromium会在错误控制台中响应：

ERROR [app-router] Error: Route not found: 
    at Router._createNavigationInstruction (https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/dist/aurelia-bundle.js:7235:29)
    at https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/dist/aurelia-bundle.js:7521:28error @ cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/dist/aurelia-bundle.js:8297
cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/dist/aurelia-bundle.js:8297 ERROR [app-router] Error: Route not found: (…)error @ cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/dist/aurelia-bundle.js:8297

那么，我做错了什么？我如何插入一个按钮，当单击该按钮时，将加载应用程序的其余部分

以下是更改后的文件以供快速参考：

app clist.html

app clist.js

从“/WebAPI”导入{WebAPI}；
导出类应用程序{
静态注入（）{return[WebAPI]；}
构造函数（api）{
this.api=api；
}
配置路由器（配置，路由器）{
config.title='Contacts'；
config.map([
{route:'app clist'，moduleId:'app clist'，title:'Select'}，
{route:'contacts/:id'，moduleId:'contact-detail'，name:'contacts'}
]);
this.router=路由器；
}
}

app.html

app.js

从“/WebAPI”导入{WebAPI}；
导出类应用程序{
静态注入（）{return[WebAPI]；}
构造函数（api）{
this.api=api；
}
配置路由器（配置，路由器）{
config.title='Contacts'；
config.map([
{路由：''，模块ID:'btn start'，标题：'start'}，
{route:'appclist'，moduleId:'appclist'，name:'appclist'，title:'C List'}，
{route:'contacts'，moduleId:'no selection'，title:'Select'}，
{route:'contacts/:id'，moduleId:'contact-detail'，name:'contacts'}
]);
this.router=路由器；
}
}

btn start.html

点击这里开始！

btn start.js

从“/WebAPI”导入{WebAPI}；
从'aurelia Router'导入{Router}；
从“/App”导入{App}；
导出类BtnStart{
静态注入（）{return[WebAPI、路由器、应用]；}
构造函数（api、路由器、应用程序）{
this.api=api；
this.router=路由器；
this.app=app；
}
goClist（）{
这个.app.router.navigateToRoute（“app-clist”）；
}
}

好的，我想我解决了这个问题。请参阅，由于将

app.*

全部粘贴到

app clist.*

，现在

app clist中也有一个
——就像
app
中有一个一样。为此，我们有嵌套路由（）。当旧的
configureRouter
code开始在其
app clist
位置启动时，这会产生问题

我的解决方案是：


对主项和子项分别使用
s的名称
让每个
.js
文件中的
configureRouter
只处理相应
.html
文件中的命名路由器视图

固定版本可在以下网站上找到：




以下是更改后的文件以供快速参考：

app clist.html



app clist.js

从“/WebAPI”导入{WebAPI}；
导出类应用程序{
静态注入（）{return[WebAPI]；}
构造函数（api）{
this.api=api；
}
//无配置路由器（配置，路由器）{此处与app.js中相同！
/**/配置路由器（配置，路由器）{
config.title='Contacts'；
config.map([
//此处必须包含空路由“”，否则在开始时“未找到路由”
{route:[''，'contacts']，视口：{chldrt:{moduleId:'no selection'}}，title:'Select'}，
{route:'contacts/:id'，视口：{chldrt:{moduleId:'contact-detail'}}，名称：'contacts'}
]);
this.router=路由器；
}
}

app.html



app.js

从“/WebAPI”导入{WebAPI}；
导出类应用程序{
静态注入（）{return[WebAPI]；}
构造函数（api）{
this.api=api；
}
配置路由器（配置，路由器）{
config.title='应用程序联系人'；
config.map([
{路由：''，视口：{mainrt:{moduleId:'btn start'}}，标题：'start'}，
{route:'app clist'，视口：{mainrt:{moduleId:'app clist'}，chldrt:{moduleId:'no selection'}}，name:'app clist'，title:'C List'}/,，
//{route:'contacts'，视口：{chldrt:{moduleId:'no selection'}}，title:'Select'}，
//{route:'contacts/:id'，视口：{chldrt:{moduleId:'contact-detail'}}，名称：'contacts'}
]);
this.router=路由器；
}
}

btn start.html


点击这里开始！

btn start.js

从“/WebAPI”导入{WebAPI}；
从'aurelia Router'导入{Router}；
从“/App”导入{App}；
导出类BtnStart{
静态注入（）{return[WebAPI、路由器、应用]；}
构造函数（api、路由器、应用程序）{
this.api=api；
this.router=路由器；
this.app=app；
}
goClist（）{
这个.app.router.navigateToRoute（“app-clist”）；
}
}