奧裏利亞路由器/子路由器 - 「錯誤：路徑找不到」

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....。這一警告似乎並沒有本身已經體現到任何實際的問題，但...

什麼頭痛