奥里利亚路由器/子路由器 - “错误：路径找不到”

Question

我试图建立具有以下配置的应用程序：

〜还有通过授权

• 登录控制的两个基页页 - 如果没有会话ID
• 仪表板页面 - 如果

登录〜一旦仪表盘页面上我想用这个作为一种用于其它视图的容器。仪表板基本上只是一个带导航栏的模板，并且router-view。我希望路由器视图能够在2页/视图之间切换，同时保持仪表板/导航作为布局。这两个网页切换

之间

• 更新进纸
• 测试页

这里有文件，我现在有他们建立

app.ts

import {NavigationInstruction, Next, Redirect, Router, RouterConfiguration} from 'aurelia-router'; 

/** 
* Main application router, controls views by authorization 
*/ 
export class App { 

    public router: any; 

    public configureRouter(config: RouterConfiguration, router: Router): void { 
    config.title = 'Dashboard'; 
    config.addPipelineStep('authorize', AuthorizeStep); 

    // These are the two main routes a login page and a dashboard. 
    // Which page is visible is controlled by the authorization step 
    config.map([ 
     {route: ['', 'pmdash'], name: 'pmdash', moduleId: './pages/pmdash/pmdash', nav: true, auth: true}, 
     {route: 'login',  name: 'login', moduleId: './pages/login/login', nav: false, auth: false, title: 'Login'} 
    ]); 
    this.router = router; 
    console.log(this.router); 
    } 
} 

export class AuthorizeStep { 

    // Method may be used elsewhere to verify user is logged in 
    public static isLoggedIn(): boolean { 
    let sessionID = sessionStorage.getItem('sessionID'); 
    return (typeof sessionID !== 'undefined' && sessionID !== null); 
    } 

    public run(navigationInstruction: NavigationInstruction, next: Next): Promise<any> { 

    if (navigationInstruction.getAllInstructions().some(i => i.config.auth)) { 
     let isLoggedIn = AuthorizeStep.isLoggedIn(); 

     if (!isLoggedIn) { 
     return next.cancel(new Redirect('login')); 
     } 
    } 
    return next(); 
    } 
} 

app.ts控制何时您基于会话ID登录登录页面或仪表板。这工作，但一旦登陆它开始变得混乱起来仪表盘页面上......这里的仪表盘和相应的导航栏文件

pmdash.html

<!-- Base template for PM Dashboard views --> 

<template> 

    <require from="../../components/navbar/navbar"></require> 
    <nav-bar></nav-bar> 
    <router-view></router-view> 

</template> 

pmdash.ts

import {Router, RouterConfiguration} from 'aurelia-router'; 

/** 
* Child router for Dashboard pages/views 
*/ 
export class DashBoard { 

    public router: Router; 

    // On immediate navigation to the dashboard this loads `update-feed`, which works 
    // However it only works because it is assigned the base route ''. 
    // If I try to navigate to `update-feed` or `test-page` by url I get `Error: Route not found:` in console 
    public configureRouter(config: RouterConfiguration, router: Router) { 
    config.map([ 
     {route: ['', 'update-feed'], name: 'update-feed', moduleId: './pages/update-feed/update-feed', nav: true, title: 'Feed'}, 
     {route: ['test-page'],  name: 'test-page', moduleId: './pages/test-page/test-page',  nav: true, title: 'Test'} 
    ]); 
    this.router = router; 

    // These console logs show the router is the child of `AppRouter` and has all the routes assigned to it, like it should. 
    console.log(this.router); 
    console.log(this.router.routes); 
    } 

} 

navbar.html

<template> 

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 

    <!-- Here is an effort to bind the router to the navigation --> 
    <div class="navbar-header" router.bind="router"> 

     <!-- Here again clicking on the link gives `Route not found: /update-feed`--> 
     <a class="navbar-brand" route-href="route: update-feed"> 
     <i class="fa fa-user"></i> 
     <span>PM Dashboard</span> 
     </a> 

     <!-- This works. It calls the logout function which then redirects to the login page on the main router--> 
     <button type="button" class="btn btn-default navbar-btn pull-right" click.delegate="logOut()">Log Out</button> 
    </div> 
    </nav> 

</template> 

个

navbar.ts 眼下navbar.ts只包含logOut()功能，所以我跳过了简洁的代码。

现在这里是我想要pmdash.ts子路由器来控制的两页。基本上，我设置它的方式我期望登陆pmdash页面/路线时，那么pmdash视图/视图模型应该处理这些页面/视图，而将pmdash作为一种模板，其中导航栏位于顶部，然后根据链接（或默认）切换出哪个视图显示在导航栏下方。

更新feed.html

<template> 

    <h1>You currently have no projects needing updated.</h1> 

    <!-- Clicking this link gives `Error: Route not found: /test-page` in console--> 
    <a route-href="route: test-page">click for test page</a> 

</template> 

测试页。HTML

<template> 
    TESTING 
    <!-- Clicking this link gives `Error: Route not found: /update-feed` --> 
    <a route-href="route: update-feed">click for route page</a> 
</template> 

update-feed.html和test-page.html都具有相关.ts文件以及但是现在他们是空白。

我只是不明白我在做什么错。我误解了路由器/子路由器如何处理基本级别的页面？有没有什么办法让配置工作像我目前拥有的一样，还是我需要废弃这种方法并尝试一些完全不同的方法？

同样，主要问题是pmdash子路由器不会切换update-feed和test-page路由的意见。但是，如果我将route: ''中的任一条路线分配，那么它将正常加载，但我仍然无法链接到其他路线/视图。

Answer 1

好了，我已经“固定”这一点，方法如下：

起初，我真的不认为[1] [这太问题]是有关我的情况，但它是。

基本上问题是处理绝对的路线和基本路线（即route: ''）没有被正确地处理假冒路由到子路由器时。

解决方法是使母路由器重定向，像这样（用我自己的app.ts从上面的例子）：

public configureRouter(config: RouterConfiguration, router: Router): void { 
    config.title = 'Dashboard'; 
    config.addPipelineStep('authorize', AuthorizeStep); 
    config.map([ 
     {route: '',  redirect: 'dashboard'}, 
     {route: 'dashboard', name: 'pmdash', moduleId: './pages/pmdash/pmdash', nav: true, auth: true}, 
     {route: 'login',  name: 'login', moduleId: './pages/login/login', nav: false, auth: false, title: 'Login'} 
    ]); 
    this.router = router; 
    console.log(this.router); 
    } 

这显然是a workaround to a known issue with how the router handles an array of routes with a child router。但是，尽管解决方法确实有效，但每当应用根路由被命中时，控制台现在都会吐出此警告，即Warning: a promise was rejected with a non-error: [object Object] at _buildNavigationPlan....。这一警告似乎并没有本身已经体现到任何实际的问题，但...

什么头痛