Aurelia不能通过单击导航路径父(路由未找到)？

Question

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

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

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

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

如下所示：

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

一旦你点击“点击这里开始！”文本中，铬在错误控制台中用以下内容进行响应：

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");
  }

}

Answer 1

好吧，我想我解决了这个问题。请看，由于app.*在app-clist.*中的总粘贴量，现在app-clist中也有一个<router-view> --就像app中的一个。这是嵌套路由( Nested routing in aurelia js )。当旧的configureRouter代码开始启动它的app-clist位置时，这会产生问题。

对我来说，解决办法是：

• 对主和子<router-view>使用单独的名称
• 让每个configureRouter文件中的.js只负责相应的.html文件中的指定路由器视图。

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

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

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

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>

  <div class="container">
    <div class="row">
      <contact-list class="col-md-4"></contact-list>
      <router-view name="chldrt" 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;
  }

  // no configureRouter(config, router){ here same as in app.js!
  /**/configureRouter(config, router){
    config.title = 'Contacts';
    config.map([
      // must include empty route '' here, else "Route not found" at start
      { route: ['','contacts'],      viewPorts: { chldrt: { moduleId: 'no-selection' } },   title: 'Select'},
      { route: 'contacts/:id',  viewPorts: { chldrt: { 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 name="mainrt"></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 = 'App Contacts';
    config.map([
      { route: '',              viewPorts: { mainrt: { moduleId: 'btn-start' } },   title: 'Start'},
      { route: 'app-clist',     viewPorts: { mainrt: { moduleId: 'app-clist' }, chldrt: { moduleId: 'no-selection' } },   name: 'app-clist', title: 'C List'} //,
      //{ route: 'contacts',      viewPorts: { chldrt: { moduleId: 'no-selection' } },   title: 'Select'},
      //{ route: 'contacts/:id',  viewPorts: { chldrt: { 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");
  }

}