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

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

JobView Page：

<template>

    <router-view></router-view>

</template>

现在，这是儿童观点。我的假设是发生的路由应该相对于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，但是job-view注入job并使用job-view已保存的路由器也不起作用。

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

注意到mod：类似的问题在How to access child router in 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;
    };

}

相应的＆＃34; work-section.html＆＃34;只是一个路由器视图：

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

在这个用例中，我有我的主app.js定义了一个子路由器＆＃34; work＆＃34;，它位于src下的子目录中。

当路由/work被激活时，子路由器＆＃34;工作部分＆＃34;接管，激活＆＃34;工作清单＆＃34;路径，路径段在那里结束：/work

＆＃34;工作list.js＆＃34;从REST API检索项目，然后将数据传递给视图。从那里，我能够使用路线绑定来获得工作细节＆＃34;在＆＃34; work-list.html＆＃34;视图：

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

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

Answer 2

我会尝试在下面逐一回答你的问题。

我将从Q2开始

问题2：如果始终可以访问路由器，为什么我们需要在这里保存路由器奥里利亚路由器？

因此，在您的应用程序模式 - 查看应用程序类中，您在视图中引用路由器属性：<nav-bar router.bind="router"></nav-bar>，这就是您需要声明属性以便使用它的原因。在第二种观点中你不是那么你不需要它： - ）

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

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

问题3：我已经看到路由器引用了router.navigateToRoute和router.navigate，但没有说明何时使用或者差异是什么，并且文档没有看到解释。哪个应该用？文档

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

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

问题4：同样，即使在HTML页面中，我也希望路由到亲戚。上述方法不起作用，我应该使用什么？

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

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

最后你的主题问题：

问题1：如何在子路线之间导航

现在你可能知道答案，只需使用：router.navigate(fragment: string, options?: any)和绝对网址。

下面的示例自定义属性来解决此问题：

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>

希望这会对你有所帮助，欢呼： - ）

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

2 个答案: