아우렐 리아 라우터/어린이 라우터 - '오류 : 경로를 찾을 수 없습니다'

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 r 세션 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 view/viewmodel이이 페이지/뷰를 처리해야하며, 상단에 navbar가있는 템플릿의 종류 인 pmdash에 머물러 있어야합니다. 링크 (또는 기본)는 어떤보기가 navbar 아래에 표시되는지를 전환합니다.

  갱신 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> 
  

  테스트 페이지입니다.

  <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 모두 HTML뿐만 아니라 .ts 파일을 연결했지만 지금 그들은 비어 있습니다.

  난 그냥 내가 뭘 잘못 이해하지 않습니다. 라우터/하위 라우터가 기본 수준의 페이지를 어떻게 처리하는지 오해하니? 현재 가지고있는 것처럼 구성 작업을 수행 할 수있는 방법이 있습니까? 아니면이 접근법을 폐기하고 완전히 다른 것을 시도해야합니까?

  다시 말하지만 가장 큰 문제는 및 test-page 경로를 사용하여 하위 라우터가 보기로 전환하지 않는다는 것입니다. 그러나 두 경로 중 하나를 route: ''으로 지정하면로드가 잘되지만 다른 경로/뷰에는 연결할 수 없습니다. 처음에는

  난 정말 [이 SO 질문] [1] 내 상황과 관련라고 생각하지 않았다, 그러나 그것은이었다

Answer 1

좋아, 그래서 내가 "고정"한이, 여기 방법입니다.

은 기본적으로 문제는 절대 경로와 기본 경로 (예 : route: '')하지 올바르게 처리 자식 라우터에 라우팅 오프 통과하면되고 처리와 함께입니다.

이

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입니다 :

해결 방법은 부모 라우터 그래서 (예를 들어 위에서 app.ts 내 자신의 사용)과 같은 리디렉션하는 것입니다. 그러나 해결 방법이 작동하더라도 콘솔 루트에 도달 할 때마다 콘솔에 Warning: a promise was rejected with a non-error: [object Object] at _buildNavigationPlan....이라는 경고가 표시됩니다. 이 경고는 ... 아직 실제 문제로 자신을 각성 한 것 같지 않습니다

무엇 두통