Aurelia JS - cannot navigate route parent with click (Route not found)?

问题

I tried to change the contact list tutorial:

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

... such that it starts with a "click me" button/div, which would then load the rest of the contact list app as it was. So in order to do that, I:

Copied old app.* to app-clist.*
New app.* just has a <router-view> and manages the routing/navigation
Added btn-start.* which just contains a div, which on click should navigate the route to app-clist.

This is shown in:

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

Once you click on the "Click here to start!" text, Chromium responds with this in the error console:

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

So, what am I doing wrong - and how can I insert a button, which when clicked, will load the rest of the application?

Here are the changed files for quick reference:

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

}

回答1:

Ok, I think I managed to solve this. See, because of the total paste of app.* into app-clist.*, now there is a <router-view> also in app-clist - just as there is one in app. This, we have nested routing ( Nested routing in aurelia js ). And this creates problems when the old configureRouter code starts kicking in its app-clist location.

The solution for me was:

Use separate names of <router-view>s for the main and child one
Let configureRouter in each .js file take care only of the named router-view in the corresponding .html file

The fixed version can be found on:

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

Here are the changed files for quick reference:

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

}

来源：https://stackoverflow.com/questions/41910246/aurelia-js-cannot-navigate-route-parent-with-click-route-not-found

标签

javascript

aurelia

aurelia-router