Aurelia：儿童路线之间的导航

Question

我试图从一个儿童路线导航到另一个儿童路线，但我不断得到Route not found。我的主要问题：如何浏览子视图？

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

应用模式 - 视图 App类：

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。

工作视图类：

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> 

现在，这里是孩子的意见。我的假设是，发生的路由应该是相对于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

我已经在我的奥里利亚配置子路由器的方式Apps是用这种方式：

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

} 

相应的“工作section.html”是一个简单的路由器查看：

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

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

当路由/work被激活时，子路由器，“工作部分”接管，激活“工作清单”的路线，如路径段结束还有：/work

“工作list.js “从REST API中检索项目，然后将数据传递给视图。 从那里，我能够使用路由绑定到在“工作list.html”视图中的“工作细则”：

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

希望有所帮助你。如果你问怎么做重定向，或者如何从视图导航到孩子路线，我不是100％确定的，所以如果我错了，请纠正我，我会尽我所能来更新我的答案为你。

Answer 2

我会尽量在下面逐一回答你的问题。

我将Q2

Q.2开始：为什么我们需要在这里保存路由器，如果它总是从访问 奥里利亚路由器？

所以在你应用模式，查看App类你引用路由器财产在你看来：<nav-bar router.bind="router"></nav-bar>，这就是为什么你需要申报财产使用它即可。在第二个视图中，你不是那么需要它:-)

当您需要在main.ts/main.js中使用路由器做某事时，还会添加属性router - 应用程序的起点。这是因为第一次配置了路由器，并且注入将无法在构造函数中使用，所以您需要保存此属性以获取configureRouter(..)方法（注意：这是测试版1之前的一种情况，我不知道如果它现在还在那里）。

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

问题3：我见过router.navigateToRoute和router。导航引用，但没有指示何时使用或有什么区别，并且文档看不到解释。应该使用哪个？文档

方法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对象，而不是使用params连接URL。

Q.4：同样，我想要路由到相对的，即使在HTML页面。以上将不起作用，所以我应该使用什么？

在Aurelia路上，我们没有使用a标签的href属性直接进行导航。正如Brandon已经回答的那样，您必须使用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); 
} 

最后你的主题问题：

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

希望这会帮助你，欢呼声:-)