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

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

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>

<!-- 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.2：如果总是可以从

aurelia router

访问

路由器，为什么我们需要在这里保存
路由器

应用程序页面：

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

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

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>

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

作业查看页面：

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

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

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>

<!-- 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.3：我已经看到了
router.navigateToRoute
和
router.navigate
引用，但没有说明何时使用或两者之间的区别，文档也没有解释。应该使用哪一种

作业页面：
jobs.html
的详细信息是不相关的，所以这里不列出它们

最后，
作业
视图：

工作类别：
与
job.js
无关，因此不列出代码。最多我可以执行导航返回到
作业
，但这将在下面的页面中处理

作业页面：

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

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

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>

<!-- 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：同样，我希望路由到relative，即使是在HTML页面中。以上方法不起作用，我应该用什么

在一个类似的问题中出现了一个错误，但是将
作业视图
注入
作业
并使用
作业视图
保存的路由器也不起作用

顺便说一下，如果我手动导航到
http://localhost:3000/#/job-view/job/3
页面加载良好，因此路由器有问题

国防部注意：
在上有人问过类似的问题，但没有找到有效的解决方案。
我在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>

希望这能帮到你。我不能100%确定您是否询问如何重定向，或者如何从视图导航到子路径，因此如果我错了，请纠正我，我将尽力为您更新我的答案。
我将尝试在下面逐一回答您的问题

我将从第二季度开始

问题2：如果路由器总是可以从计算机访问，为什么我们需要在这里保存它
奥雷莉亚路由器

因此，在您的应用模式视图App类中，您正在视图中引用路由器属性：
，这就是为什么您需要声明该属性才能使用它。在第二个视图中，您不是，所以您不需要它：-）

当您需要在main.ts/main.js（应用程序的起点）中处理路由器时，也会添加属性
router
。这是因为路由器是第一次在那里配置的，并且注入将不会在构造函数中工作，所以您需要保存此属性以在
configureRouter（..）
方法中获取它（注意：这是beta 1之前的情况，我不知道现在是否仍然存在）

在代码中，您有一个对
this.router.refreshNavigation（）的调用这将确保您的路由器更新了有关路由当前位置的新信息

问题3：我已经看到router.navigateToRoute和router.navigate都被引用了，但是没有说明何时使用它们或者它们之间的区别，文档也没有解释。应该使用哪一种？文件

方法
router.navigate（fragment:string，options？：any）
使用URL片段而不是路由名称来导航，例如
router.navigate（“#/app/child”，{……}）
。此方法必须用于在路由器之间绝对导航，以及访问父URL等

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

问题4：同样，我希望路由到relative，即使在HTML页面中也是如此。以上方法不起作用，我应该用什么

在Aurelia中，我们没有直接使用
标签的
href
属性进行导航。正如Brandon已经回答的那样，您必须使用
route href
属性，这可能没有任何文档记录，只是出现在论坛和门户上。这相当于
路由器.navigateToRoute（路由：string，params？：any，options？：any）
，因此您不能使用它在路由器之间导航。在这种情况下，您可以使用自定义属性或只使用
单击.triger=“navTo（'./app/child'）”
，其中
navTo（）
方法在视图模型中实现，如下所示：

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

最后是你的主题问题：

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



希望这能对你有所帮助，干杯：-）
我以前从未见过这样的事。有趣。有相关文件吗？有机会的话我会试试的。我遇到的问题是调用this.router.navigateToRoute（“作业”{id:id}）。我将更新问题以反映这一点。对于回复您的时间延误深表歉意。route href位于“生成路由URL”下的备忘单中，它确实
this.router.navigateToRoute（'workDetail'，{slug:'slug'}）
（或者应该是
this.router.navigate（'workDetail'，{slug:'s