Aurelia JS-无法通过单击导航路由父级(找不到路由)? [英] Aurelia JS - cannot navigate route parent with click (Route not found)?
问题描述
我试图更改联系人列表教程:
I tried to change the contact list tutorial:
...，使其以单击我"按钮/div开头，然后将按原样加载联系人列表应用程序的其余部分.因此，为了做到这一点，我:
... 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:
- 将旧的
app.*复制到app-clist.* - 新的
app.*仅具有一个<router-view>并管理路线/导航 - 添加了
btn-start.*，其中仅包含一个div，单击后即可将路径导航到app-clist.
- Copied old
app.*toapp-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 toapp-clist.
这显示在:
点击点击此处开始！"文本，Chromium会在错误控制台中对此进行响应:
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");
}
}
推荐答案
好的，我想我已经解决了这个问题.看到，由于app.*粘贴到app-clist.*中的全部内容，现在app-clist中也有一个<router-view>-就像app中有一个.这样，我们就嵌套了路由( aurelia js中的嵌套路由).当旧的configureRouter代码开始在其app-clist位置开始播放时，这会产生问题.
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:
- 将主要名称和子名称分别使用
<router-view>的名称 - 让每个
.js文件中的configureRouter只处理相应.html文件中的命名路由器视图
- Use separate names of
<router-view>s for the main and child one - Let
configureRouterin each.jsfile take care only of the named router-view in the corresponding.htmlfile
可以在以下位置找到固定版本:
The fixed version can be found on:
以下是更改的文件，以供快速参考:
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");
}
}
这篇关于Aurelia JS-无法通过单击导航路由父级(找不到路由)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
