Aurelia:如何在子路线之间导航

Question

我正在尝试从一条子路线导航到另一条路线，但我不断收到 Route not found 。我的主要问题:如何在 subview 之间导航？

下面是代码，我还会有其他问题。

应用模式- View 应用程序类别:

export class App {
  configureRouter(config, router) {
    config.title = 'My Site';

    config.map([
      { route: ['','job-view'], name: 'jobView', moduleId: './job-view', nav: true, title:'Jobs'},
      { route: ['services'], name: 'services', moduleId: './services', nav: true, title:'Services'}
    ]);

    this.router = router;
    this.router.refreshNavigation();
  }
}

问题2:为什么我们需要保存router如果始终可以从 aurelia-router 访问它，则位于此处？

应用页面:

<template>
  <require from='./nav-bar'></require>
  <nav-bar router.bind="router"></nav-bar>
  <div class="container">
      <router-view></router-view>
  </div>
</template>

好的，现在我们已经定义了根页面 View 和导航，让我们定义 job-view MV.

JobView 类:

export class JobView {
  configureRouter(config, router) {
    config.map([
      { route: ['','jobs'], name: 'jobs', moduleId: './jobs', nav: false, title:'Jobs', settings:{icon:'glyphicon glyphicon-align-justify'} },
      { route: ['job/:id'], name: 'job', moduleId: './job', nav: false, title:'Job Details'}
    ]);

    this.router = router; //WHY SAVE THIS?
    this.router.refreshNavigation();
  }
}

作业查看页面:

<template>

    <router-view></router-view>

</template>

现在，这是 subview 。我的假设是发生的路由应该相对于 job-view 。理想情况下，这就是我想要的。

作业类 (为简洁起见，删除了一堆代码):

import {Router} from 'aurelia-router';

    @inject(Router)
    export class Jobs {

    constructor(router) {
      this.router = router;
    }

    toJob(id) {
      // this.router.navigateToRoute("job", {id:id}); // ERROR - ROUTE NOT FOUND
      this.router.navigate("#/job-view/job/".concat(id)); // THIS WORKS
    }
}

Q.3:我都见过 router.navigateToRoute和router.navigate引用了，但没有说明何时使用或者有什么区别，并且该文档没有解释。应该使用哪个？ Docs

职位页面:jobs.html的详细信息无关紧要，因此此处不列出它们。

最后，job查看:

工作类别:与 job.js 没有任何相关内容，所以不列出代码。我最多可以导航回 jobs ，但这在页面下面进行处理。

职位页面:

<!-- a bunch of html //-->
<!-- HOW TO USE ROUTER IN HTML, NOT BELOW URL HREF? //-->
<a href="#/jobs">Print Jobs</a>
<!-- a bunch of html //-->

Q.4:同样，我想路由到相对路径，即使在 HTML 页面中也是如此。上面的方法不起作用，那么我应该使用什么呢？

有一个proposed answer在类似的问题中，但注入(inject) job-view进入job并使用 job-view保存的路由器也不起作用。

顺便说一句，如果我手动导航到 http://localhost:3000/#/job-view/job/3页面加载正常，因此路由器的情况很清楚。

模组注意事项:在 How to access child router in Aurelia? 上提出了类似的问题但没有找到有效的解决方案。

Answer 1

下面我会尽力一一回答大家的问题。

我将从第二季度开始

Q.2: Why do we need to save router here if it's always accessible from aurelia-router?

因此，在您的应用程序模式- View 应用程序类中，您在 View 中引用路由器属性:<nav-bar router.bind="router"></nav-bar> ，这就是为什么您需要声明该属性才能使用它。在第二个 View 中，您不是，所以您不需要它:-)

该属性(property)router当您需要在 main.ts/main.js(应用程序的起点)中对路由器执行某些操作时，也会添加此内容。这是因为路由器是第一次配置的，在构造函数中注入(inject)是不起作用的，所以你需要保存这个属性才能在 configureRouter(..) 中获取它。方法(注:这是beta 1之前的情况，不知道现在是否还在)。

在您的代码中，您需要调用 this.router.refreshNavigation();这将确保您的路由器更新为有关当前路由位置的新信息。

Q.3: I've seen both router.navigateToRoute and router.navigate referenced, but no indication when to use either or what the difference is, and the document doesn't seen to explain. Which should be used? Docs

方法router.navigate(fragment: string, options?: any)使用 URL 片段而不是路由名称进行导航，因此例如router.navigate('#/app/child', {...<options - not params od the URL>...}) 。该方法必须用于在路由器之间进行绝对导航，以及访问父 URL 等。

如果您仅在当前路由器周围导航，您将始终使用 router.navigateToRoute(route: string, params?: any, options?: any) 。此方法使用路由名称，而不是 URL，我们只是在自定义路由映射中放置一个路由名称(自定义表示当前子路由映射，或关于我们在页面上的 URL 位置的当前主路由)。在这里您可以以更方便的方式传递 URL 参数，如您所见。您可以使用 params 对象，而不是将 URL 与 params 连接起来。

Q.4: Again, I'd like routing to relative, even in the HTML page. The above won't work, so what should I use?

在 Aurelia 中，我们没有使用 href a 的属性直接标记用于导航。正如布兰登已经回答的那样，您必须使用 route-href属性，可能没有任何记录，只是出现在论坛和门户网站上。这相当于 router.navigateToRoute(route: string, params?: any, options?: any) ，因此您不能使用它在路由器之间导航，在这种情况下您可以使用自定义属性或仅使用 click.triger="navTo('#/app/child')" ，其中navTo()方法在您的 View 模型中实现，如下所示:

public navTo(routeName: string) {
    // Assuming you are injecting router somewhere in the constructor
    this.router.navigateToRoute(routeName);
}

最后是你的主题问题:

Q.1: How navigate between child routes

也许现在您知道答案了，只需使用:router.navigate(fragment: string, options?: any)带有绝对 URL。

下面的示例自定义属性可以解决此问题:

import {inject} from "aurelia-dependency-injection";
import {Router} from "aurelia-router";
import {customAttribute} from "aurelia-framework";

@customAttribute('nav-href')
@inject(Element, Router)
export class NavHref {
    private value: string = '';

    constructor(private element: Element, private router: Router) {
        let $this = this;
        element.addEventListener('click', () => {
            if ($this.value === 'back') {
                $this.router.navigateBack();
            } else {
                // expression
                $this.router.navigate($this.value);
            }
        });
    }

    public valueChanged(newValue: string, oldValue: string) {
        this.value = newValue;
    }
}

首先，您需要将其导入 HTML，我将文件命名为 nav.href.ts:

<require from="common/nav.href"></require>

然后只需在 HTML 代码中使用它即可:

<a nav-href="#/home/any-location">My link to any location</a>

希望这对你有帮助，干杯:-)