Question

我觉得好像已经提出了类似的问题，但我一直无法找到答案。

我正试图通过其功能来隔离我的应用程序。理想情况下，每个功能都可以设置自己的路由，Aurelia的子路由器功能似乎非常合适，但我无法让它工作。

应用程序的结构如下：

app.ts
app.html
  /lectures
    list.ts
    list.html
    details.ts
    details.html
    index.ts
    index.html

如果需要，我可以包含任何其他文件来回答问题，但是我们试图尽可能地保持问题的紧凑性。 app.html和lectures/index.html文件都只包含<template><router-outlet></router-outlet></template>。

我有app.ts：

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

export class App {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.options.pushState = true;
    config.map([
      {
        moduleId: './public-site/lectures',
        name: 'lectures',
        nav: true,
        route: ['', 'lectures/:id?'],
        title: 'Lectures'
      }
    ]);
  }
}

lecture/index.ts

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

export class Index {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.options.pushState = true;

    config.map([
      { route: '', moduleId: './list' },
      { route: ':id', moduleId: './details' }
    ]);
  }
}

然后我有lectures/details.ts

import { NavigationInstruction, RouteConfig, RoutableComponentActivate } from 'aurelia-router';

export class LectureDetails implements RoutableComponentActivate {
  activate(params: any, routeConfig: RouteConfig, navigationInstruction: NavigationInstruction): Promise<any> {
    debugger;
  }
}

和lecture\list.html

<template>
        <div repeat.for="lecture of lectures" class="grid-body-cell" click.delegate="navigateToLecture(lecture)">
          ${lecture.title}
        </div>
</template>

lecture\list.ts

import { autoinject } from 'aurelia-framework';
import { Router } from 'aurelia-router';

@autoinject()
export class LecturesList {
  constructor(private router: Router) {}

  navigateToLecture(lecture: {id:number}) {
    this.router.navigate(`#/lectures/${lecture.id}`);
  }
}

当应用程序加载时，它会正确导航并显示列表页面，但是当我单击网格中的任何讲座时，url会更新到/ lectures / 1，但我的调试器语句永远不会被命中。我无法弄清楚我做错了什么。

似乎正在发生的是，当URL更新时，路由器仍然将应用程序定向到列表组件。有没有办法让路由器兑现并将参数传递给子路由器？

如何更新设置以让子路由器使用参数？

Answer 1

首先，用于显示路由视图的路由器元素称为<router-view>，因此您对子路由器的视图应为：<template><router-view></router-view></template> - 我相信您在Angular 2+应用程序中使用<router-outlet>用于路由。我在这里做出假设，如果你看到正在渲染的东西，你已经在做了。

其次，您在根路由器配置上定义了config.options.pushState = true，然后在您传入散列的navigateToLecture方法内部（如果您不使用pushState，则会执行此操作）。因此，Aurelia正在从URL中删除哈希值（如预期的那样），因为您使用的是pushState，而pushState URL不需要使用# hack。

第三，我会给你的路线命名（你会在一瞬间发现原因）。命名您的路线允许您按名称引用它们，并使用navigateToRoute('routename', {paramsobject})或route-href（我们将在下面讨论）。

因此，在lecture/index.ts中，在您的路线上添加name属性：

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

export class Index {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.options.pushState = true;

    config.map([
      { route: '', name: 'lecture-list', moduleId: './list' },
      { route: ':id', name: 'lecture-detail', moduleId: './details' }
    ]);
  }
}

最后，您可以使用router.navigate属性代替在视图中调用route-href的点击事件，这样您就可以使链接与路由器配合使用。所以，如下所示：

<template>
        <div repeat.for="lecture of lectures" class="grid-body-cell">
          <a route-href="route: lecture-detail; params.bind: { id: lecture.id }">${lecture.title}</a>
        </div>
</template>

注意我们如何通过名称lecture-detail引用我们新命名的路线？现在Aurelia将通过并解析我们的链接并更新href属性以便它也能够到达它所需的位置。

希望有所帮助。

Answer 2

app.html

<template><router-view></router-view></template>

app.ts

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

export class App {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.pushState = true;
    config.map([
      {
        moduleId: './lectures/index',
        name: 'lectures',
        nav: true,
        route: ['', 'lectures/*id'],
        title: 'Lectures'
      }
    ]);
  };
}

lectures/index.html

<template><router-view></router-view></template>

lectures/list.html

<template>
        <div repeat.for="lecture of lectures" class="grid-body-cell" click.delegate="navigateToLecture(lecture)">
          ${lecture.title}
        </div>
</template>

lectures/list.ts

import { autoinject } from 'aurelia-framework';
import { Router } from 'aurelia-router';

@autoinject()
export class LecturesList {
  constructor(private router: Router) {}

  navigateToLecture(lecture: {id:number}) {
    this.router.navigateToRoute(`lectures`, { id: lecture.id });
  }
}

这让我花了好几个小时的时间撞到了墙上，当我向lectures/index.ts添加更多路线时，我甚至不确定这会继续有效，但它现在可以使用，并允许我继续

Aurelia子路由如何使用参数？

2 个答案: