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

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

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

应用模式 – 视图
应用类:

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:如果始终可以从aurelia-router访问,为什么我们需要在这里保存路由器?

应用页面:

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

好了,现在我们已经定义了根页面视图和导航,让我们定义作业视图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页面:

<template>

    <router-view></router-view>

</template>

现在,这是儿童观点.我的假设是发生的路由应该与作业视图相关.理想情况下,这就是我想要的.

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,但没有说明何时使用或者差异是什么,并且文档没有看到解释.哪个应该用? Docs

工作页面:
jobs.html的详细信息无关紧要,因此请勿在此处列出.

最后,工作视图:

职位类别:
与job.js无关,所以不列出代码.最多我可以执行导航回到作业,但这在页面下面处理.

工作页面:

<!-- 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页面中,我也希望路由到亲戚.以上不起作用,所以我应该使用什么?

在类似的问题中有一个proposed answer,但是将作业视图注入作业并使用作业视图保存的路由器也不起作用.

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

注意到mod:
How to access child router in Aurelia?问了一个类似的问题,但没有得到解决方案的答案.

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

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

本站公众号
   欢迎关注本站公众号,获取更多程序园信息
开发小院