Question

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

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

那么，我做错了什么 - 如何插入一个按钮，点击它后会加载应用程序的其余部分？

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

应用-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>

应用-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.*的总粘贴，现在<router-view>中也有app-clist - 就像app中有一个configureRouter一样。这个，我们有嵌套路由（Nested routing in aurelia js）。当旧的app-clist代码开始在其<router-view>位置开始时，这会产生问题。

我的解决方案是：

使用configureRouter s的单独名称作为主要和子项
让.js文件中的.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>文件中指定的路由器视图

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

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

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

应用-clist.html

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

应用-clist.js

<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.html

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

<强> app.js

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

<强> BTN-的start.html

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

<强> BTN-start.js

{{1}}

Aurelia JS - 无法通过点击（未找到路线）导航父路线？

1 个答案: