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> 

希望這會幫助你，歡呼聲:-)