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>

测试page.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....。这个警告似乎没有表现出任何实际问题......

多么令人头疼

Aurelia路由器/子路由器 - ＆＃39;错误：未找到路由＆＃39;

1 个答案: