Aurelia子路由如何使用参数？

我觉得好像已经有人问过类似的问题，但我一直找不到答案

我正试图将我的应用程序按其功能分开。理想情况下，每个功能都可以设置自己的路由，Aurelia的子路由器功能似乎非常适合，但我很难让它正常工作

应用程序的结构如下所示：

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

如果需要回答这个问题，我可以包括任何其他文件，但我已经尽力使问题尽可能紧凑。

app.html

和

讲座/index.html

文件都只包含

我有

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'
      }
    ]);
  }
}

讲座/索引.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' }
    ]);
  }
}

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

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

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}`);
  }
}

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'
      }
    ]);
  };
}

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 });
  }
}

然后我有

讲座/细节。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' }
    ]);
  }
}

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

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

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}`);
  }
}

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'
      }
    ]);
  };
}

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 });
  }
}

讲座\list.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' }
    ]);
  }
}

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

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

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}`);
  }
}

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'
      }
    ]);
  };
}

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 });
  }
}

加载应用程序时，它会正确导航并显示列表页面，但当我单击网格中的任何讲座时，url会更新为/toucts/1，但我的调试器语句从未被命中。我不知道我做错了什么

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

---

我需要如何更新设置才能使子路由器使用该参数？

首先，用于显示路由视图的路由器元素称为

，因此子路由器的视图应为：

-我相信

是您在Angular 2+路由应用程序中使用的。我在这里假设你已经在这样做了，如果你看到一些东西被渲染的话

其次，在根路由器配置上定义了

config.options.pushState=true

，然后在

navigateToTalk

方法中传入一个散列（如果不使用pushState，您会这样做）。因此，Aurelia正在从URL中删除哈希（如预期的那样），因为您使用的是pushState，而pushState URL不需要使用

hack

第三，我会说出你的路线（过一会儿你就会发现原因）。命名路由允许您按名称引用它们，并使用

navigateToRoute（'routename'，{paramsobject}）

或

route href

（我们将在下面讨论）

因此，在

讲座/index.ts

中，在路线上放置

名称

属性：

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' }
    ]);
  }
}

最后，您可以使用

route href

属性，使链接与路由器一起工作，而不是在视图中调用

router.navigate

。因此，类似于以下内容：

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

请注意，我们是如何通过名称引用新命名的路线的，

讲座详情

？现在，Aurelia将解析我们的链接，并更新

href

属性，使其也可以转到需要的地方

希望这能有所帮助。

app.html

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

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

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

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

讲座/index.html

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

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

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

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

讲座/list.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' }
    ]);
  }
}

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

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

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}`);
  }
}

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'
      }
    ]);
  };
}

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 });
  }
}

---

这花了我好几个小时的时间，我甚至不确定当我在

讲座/索引.ts中添加更多路线时，这是否会继续有效，但它现在起作用，允许我继续。
谢谢，我会尝试一下。我昨晚终于把它用上了，我也会把它作为一个答案贴出来。如果你有时间，如果你能告诉我为什么我的方法没有那么好，我会很高兴的。我试图避免命名路由，因为我的假设是它们必须是唯一的，我不想担心冲突。我来自Angular，一开始对Aurelia很满意，但有很多类似的事情让我重新考虑。命名路线不是一个要求，只是一个建议和一些我个人做的事情。我遵循一种命名模式，即使用视图模型的名称作为管线名称的前缀，以防止冲突。不要放弃，你很快就会看到你做出了正确的选择，一旦一切开始点击，你就会切换到Aurelia，你知道事情是如何拼凑起来的。如果你需要帮助，一定要访问公共Gitter频道（核心团队成员会在那里闲逛，偶尔回答问题）。谢谢。我一定会让gitter频道看看。奥雷莉亚看起来很优雅，但到目前为止我发现它的价格很高。事情并不总是直观的，文档也缺乏。无论我想在那里做什么，我都能相对容易地找到如何做的方法，虽然它通常很笨重，但它是可行的。我已经发布了对我有用的内容，如果您有时间可以发表评论，我将不胜感激。谢谢这看起来不错。它的工作原理与我的答案基本相同，只是您使用的是
navigateToRoute
（我确实提到过）而不是
route href
。如果添加更多路线，一切都将按预期进行。路由不起作用的唯一原因是，如果您多次使用相同的名称（它们必须是唯一的），或者路由视图模型无法实例化，因为内部错误阻止它由Aurelia的路由器组成。最大的变化是
app.ts
中的
'teachs/*id'
。我尝试了文档中的
“讲座*路径”
和
“讲座/*路径”
，但似乎*后面的内容需要与参数名称匹配。当我认为
：
应该表示一个参数时，仍然不知道为什么会这样。它确实有效，但我仍然很困惑，无法向其他人解释或指出正确的方向。谢谢你的帮助。