Aurelia：如何在兒童路線之間導航

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

問題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頁面：

<template>

    <router-view></router-view>

</template>

現在，這是兒童觀點。 我的假設是發生的路由應該與job-view 。 理想情況下，這就是我想要的。

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.navigate引用了router.navigateToRoute和router.navigate ，但沒有說明何時使用或者差異是什么，並且文檔沒有看到解釋。 哪個應該用？ 文件

工作頁面： 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 //-->

問題4 ：同樣，即使在HTML頁面中，我也希望路由到親戚。 以上不起作用，所以我應該使用什么？

在類似的問題中有一個建議的答案 ，但是將job-view注入job並使用job-view保存的路由器也不起作用。

順便說一下，如果我手動導航到http://localhost:3000/#/job-view/job/3頁面加載正常，那么路由器就可以清楚了。

mod的注意事項：在如何訪問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;
    };

}

相應的“work-section.html”只是一個路由器視圖：

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

在這個用例中，我有我的主app.js定義了一個子路由器“work”，它位於src下的子目錄中。

當路由/work被激活時，子路由器“工作部分”接管，激活“工作列表”路徑，因為路徑段在那里結束： /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>

希望能幫到你。 如果你問如何進行重定向，或者如何從視圖中導航到兒童路線，我不是百分之百確定，所以如果我錯了請糾正我，我會盡力更新我的答案為了你。

Answer 2

我將嘗試在下面逐一回答你的問題。

我將從Q2開始

問題2：如果始終可以從aurelia-router訪問，為什么我們需要在這里保存路由器？

因此，在您的應用程序模式 - 視圖應用程序類中，您在視圖中引用路由器屬性： <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)使用URL片段而不是路由名稱進行導航，例如router.navigate('#/app/child', {...<options - not params od the URL>...}) 。 必須使用此方法在路由器之間進行絕對導航，並訪問父URL等。

如果你只是在當前路由器周圍導航，你將始終使用router.navigateToRoute(route: string, params?: any, options?: any) 。 此方法使用路由名稱，而不是URL，我們只是在自定義路由映射中放置路由名稱（自定義表示當前子路由映射，或當前主路由關於我們在頁面上的URL位置）。 您可以在這里以更方便的方式傳遞URL參數。 您可以使用params對象，而不是將URL與params連接。

問題4：同樣，即使在HTML頁面中，我也希望路由到親戚。 以上不起作用，所以我應該使用什么？

在Aurelia中，我們沒有直接使用a標簽的href屬性進行導航。 正如布蘭登已經回答的那樣，你必須使用route-href屬性，這個屬性可能只是在論壇和門戶網站上出現。 這相當於router.navigateToRoute(route: string, params?: any, options?: any) ，因此您不能使用它在路由器之間導航，在這種情況下您可以使用自定義屬性或只使用click.triger="navTo('#/app/child')" ，其中navTo()方法在View-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)和絕對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>

希望這會對你有所幫助，干杯:-)