Aurelia:如何在儿童路线之间导航

Question

我正试图从一条儿童路线导航到另一条儿童路线,但我不断得到Route not found.我的主要问题是:如何在儿童观点之间导航？

以下是代码,我也将在下面提出其他问题.

应用模式 - 查看 应用类:

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>

好了,现在我们已经定义了根页面视图和导航,让我们定义job-viewMV.

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

JobView页面:

<template>

    <router-view></router-view>

</template>

现在,这是儿童观点.我的假设是发生的路由应该是相对的job-view.理想情况下,这就是我想要的.

Jobs Class (为简洁起见删除了一堆代码):

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

问题3:我已经看到了这两个router.navigateToRoute并且router.navigate引用了,但是没有任何迹象表明何时使用它们或者差异是什么,并且文档没有看到解释.哪个应该用？文件

工作页面: 详细信息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 //-->

问题4:同样,即使在HTML页面中,我也希望路由到亲戚.以上不起作用,所以我应该使用什么？

有一个建议的回答类似的问题,但注入job-view到job和使用job-view的保存路由器也不能工作.

顺便说一下,如果我手动导航到http://localhost:3000/#/job-view/job/3页面加载正常,那么路由器就可以清楚了.

mod的注意事项:在如何访问Aurelia中的子路由器时问了一个类似的问题？但它没有得到解决方案的答案.

Answer 1

我在Aurelia应用程序中配置子路由器的方式是这样的:

app.js

export class App {
    configureRouter(config, router) {
        config.map([
            { route: ['','home'], name: 'home', moduleId: 'home', nav: true },
            { route: 'work', name: 'work', moduleId: 'work/work-section', nav: true },
        ]);
        this.router = router;
    }
}


work/work-section.js

export class WorkSection {

    configureRouter(config, router) {
        config.map([
            { route: '', moduleId: './work-list', nav: false },
            { route: ':slug', name: 'workDetail', moduleId: './work-detail', nav: false }
        ]);
        this.router = router;
    };

}

相应的"work-section.html"只是一个路由器视图:

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

在这个用例中,我有我的主app.js定义了一个子路由器"work",它位于src下的子目录中.

当路由/work被激活时,子路由器"工作区"接管,激活"工作列表"路径,路径段在那里结束:/work

"work-list.js"从REST API检索项目,然后将数据传递给视图.从那里,我可以使用路由绑定来获取"work-list.html"视图中的"工作细节":

<div repeat.for="sample of item.samples">
    <a route-href="route: workDetail; params.bind: { slug: sample.slug }">
        ${sample.title}
    </a>
</div>

希望能帮到你.如果你问如何进行重定向,或者如何从视图中导航到儿童路线,我不是百分之百确定,所以如果我错了请纠正我,我会尽力更新我的答案为了你.

Answer 2

下面我将一一为您解答。

我将从 Q2 开始

Q.2: 如果总是可以从 aurelia-router 访问，为什么还要在这里保存 router？

因此，在您的App Mode-View App Class 中，您在 view: 中引用了路由器属性<nav-bar router.bind="router"></nav-bar>，这就是为什么您需要声明该属性才能使用它。在第二个视图中，您不是，因此您不需要它:-)

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

在您的代码中，您有一个调用this.router.refreshNavigation();将确保您的路由器使用有关路由当前位置的新信息进行更新。

Q.3：我看到router.navigateToRoute 和router.navigate 都被引用了，但是没有说明什么时候使用或者有什么区别，文档也没有解释。应该使用哪个？文档

该方法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：同样，我想路由到相对，即使在 HTML 页面中。以上都行不通，那我应该用什么？

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

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

最后你的主题问题：

Q.1：如何在子路由之间导航

可能现在您知道答案了，只需使用：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>

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