Aurelia JS - 无法通过单击导航父路由（找不到路由）？答案

【问题标题】：Aurelia JS - cannot navigate route parent with click (Route not found)?Aurelia JS - 无法通过单击导航父路由（找不到路由）？
【发布时间】：2017-01-28 13:19:02
【问题描述】：

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

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1

... 这样它以“单击我”按钮/div 开始，然后按原样加载联系人列表应用程序的其余部分。所以为了做到这一点，我：

将旧的app.* 复制到app-clist.*
新的app.* 只有一个<router-view> 并管理路由/导航
添加了 btn-start.*，它只包含一个 div，点击它应该导航到 app-clist 的路由。

这显示在：

https://gist.run/?id=c1a4b0e76f09b65dc2b976763a421674

单击“单击此处开始！”后文本，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

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="./styles.css"></require>
  <require from="./contact-list"></require>

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <i class="fa fa-user"></i>
        <span>Contacts</span>
      </a>
    </div>
  </nav>

  <loading-indicator loading.bind="router.isNavigating || api.isRequesting"></loading-indicator>

  <div class="container">
    <div class="row">
      <contact-list class="col-md-4"></contact-list>
      <router-view class="col-md-8"></router-view>
    </div>
  </div>
</template>

app-clist.js

import {WebAPI} from './web-api';

export class App {
  static inject() { return [WebAPI]; }

  constructor(api) {
    this.api = api;
  }

  configureRouter(config, router){
    config.title = 'Contacts';
    config.map([
      { route: 'app-clist',     moduleId: 'app-clist',   title: 'Select'},
      { route: 'contacts/:id',  moduleId: 'contact-detail', name:'contacts' }
    ]);

    this.router = router;
  }
}

app.html

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="./styles.css"></require>
  <require from="./contact-list"></require>

  <loading-indicator loading.bind="router.isNavigating || api.isRequesting"></loading-indicator>

  <router-view></router-view>

</template>

app.js

import {WebAPI} from './web-api';

export class App {
  static inject() { return [WebAPI]; }

  constructor(api) {
    this.api = api;
  }

  configureRouter(config, router){
    config.title = 'Contacts';
    config.map([
      { route: '',              moduleId: 'btn-start',   title: 'Start'},
      { route: 'app-clist',     moduleId: 'app-clist',   name: 'app-clist', title: 'C List'},
      { route: 'contacts',      moduleId: 'no-selection',   title: 'Select'},
      { route: 'contacts/:id',  moduleId: 'contact-detail', name:'contacts' }
    ]);

    this.router = router;
  }
}

btn-start.html

<template>
  <div id="startbtn" click.trigger="goClist()">Click here to start!</div>
</template>

btn-start.js

import {WebAPI} from './web-api';
import { Router } from 'aurelia-router';
import {App} from './app';

export class BtnStart {
  static inject() { return [WebAPI, Router, App]; }

  constructor(api, router, app) {
    this.api = api;
    this.router = router;
    this.app = app;
  }

  goClist() {
    this.app.router.navigateToRoute("app-clist");
  }

}

【问题讨论】：

标签： javascript aurelia

【解决方案1】：

好的，我想我设法解决了这个问题。看，由于app.* 完全粘贴到app-clist.* 中，现在app-clist 中也有一个<router-view> - 就像app 中有一个一样。这个，我们有嵌套路由（Nested routing in aurelia js）。当旧的configureRouter 代码开始在其app-clist 位置启动时，这会产生问题。

我的解决方案是：

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

可以在以下位置找到固定版本：

https://gist.run/?id=0ce222d928fb7d36b964de134eeb4f62