Aurelia: Cách điều hướng giữa các tuyến đường trẻ em

Question

Tôi đang cố gắng điều hướng từ một lộ trình con đến một tuyến đường khác, nhưng tôi liên tục nhận được Route not found. Câu hỏi chính của tôi: cách điều hướng giữa các chế độ xem con?

Dưới đây là mã và tôi cũng sẽ có thêm câu hỏi bên dưới.

App Chế độ-View App Class:

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: Tại sao chúng ta cần phải lưu router đây nếu nó luôn luôn thể truy cập từ aurelia-router?

App Page:

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

Ok, vì vậy bây giờ chúng ta có cái nhìn trang gốc và nav của chúng tôi xác định, hãy định nghĩa MV job-view.

JobView Class:

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 Page:

<template> 

    <router-view></router-view> 

</template> 

Bây giờ, đây là quan điểm con. Giả định của tôi là định tuyến xảy ra phải tương ứng với job-view. Đó là những gì tôi muốn, lý tưởng.

Jobs Lớp(một bó mã loại bỏ cho ngắn gọn):

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: Tôi đã nhìn thấy cả router.navigateToRoute và router.navigate tham chiếu, nhưng không có dấu hiệu cho thấy khi sử dụng một trong hai hoặc sự khác biệt là gì, và tài liệu không được giải thích. Nên sử dụng cái nào? Docs

Jobs Page: Details for jobs.html không liên quan, vì vậy không liệt kê chúng ở đây.

Cuối cùng, job xem:

Job Class: Không có gì liên quan cho job.js, vì vậy không niêm yết mã. Tối đa, tôi có thể thực hiện điều hướng quay lại jobs nhưng được xử lý bên dưới trong trang.

Việc Làm Trang:

<!-- 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: Một lần nữa, tôi muốn định tuyến để người thân, thậm chí trong trang HTML. Ở trên sẽ không hoạt động, vì vậy tôi nên sử dụng những gì?

Có một số proposed answer trong cùng một câu hỏi, nhưng việc tiêm job-view vào job và sử dụng bộ định tuyến đã lưu job-view cũng không hoạt động.

Nhân tiện, nếu tôi điều hướng theo cách thủ công đến http://localhost:3000/#/job-view/job/3 trang tải tốt, vì vậy, điều đó rõ ràng với bộ định tuyến.

Lưu ý mod: Câu hỏi tương tự được hỏi tại số How to access child router in Aurelia? nhưng không được trả lời bằng giải pháp hoạt động.

Answer 1

Con đường tôi đã cấu hình router con trong Aurelia tôi apps là theo cách này:

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

} 

Các tương ứng "công việc section.html" chỉ đơn giản là một Router Xem:

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

Trong trường hợp sử dụng này, tôi có app.js chính xác định một router con, "work", nằm trong thư mục con dưới src.

Khi một route /work được kích hoạt, các bộ định tuyến đứa trẻ, "công việc phần" tiếp quản, kích hoạt các "công việc-list" tuyến đường, như đoạn đường dừng lại ở đó: /work

"công việc list.js "truy xuất các mục từ một API REST rồi chuyển dữ liệu vào khung nhìn. Từ đó, tôi có thể sử dụng tuyến đường bắt buộc để có được một "chi tiết công việc" trong "công việc list.html" xem:

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

Hy vọng rằng sẽ giúp bạn ra ngoài. Tôi không chắc chắn 100% nếu bạn hỏi cách chuyển hướng hoặc cách điều hướng đến tuyến đường con từ chế độ xem, vì vậy hãy sửa tôi nếu tôi sai và tôi sẽ cố hết sức để cập nhật câu trả lời của mình cho bạn.

Answer 2

Tôi sẽ cố gắng trả lời từng câu hỏi bên dưới.

Tôi sẽ bắt đầu từ Q2

Q.2: Tại sao chúng ta cần phải lưu bộ định tuyến ở đây nếu nó luôn luôn thể truy cập từ aurelia-router?

Vì vậy, trong bạn App Chế độ-View App Lớp bạn đang tham khảo hữu bộ định tuyến theo quan điểm của bạn: <nav-bar router.bind="router"></nav-bar>, đó là lý do tại sao bạn cần phải kê khai tài sản để sử dụng nó sau đó. Trong giao diện thứ hai, bạn không phải là bạn không cần nó :-)

Thuộc tính router cũng được thêm khi bạn cần làm điều gì đó với bộ định tuyến trong main.ts/main.js - điểm bắt đầu của ứng dụng . Điều này là do router được cấu hình lần đầu tiên ở đó, và việc tiêm sẽ không hoạt động trong hàm tạo, vì vậy bạn cần lưu thuộc tính này để lấy nó trong phương thức configureRouter(..) (lưu ý: đây là một trường hợp trước phiên bản beta 1, tôi không biết nếu nó vẫn còn đó bây giờ).

Trong mã của bạn, bạn có một cuộc gọi cho this.router.refreshNavigation(); điều này sẽ đảm bảo rằng bộ định tuyến của bạn được cập nhật với thông tin mới liên quan đến vị trí hiện tại của định tuyến.

Q.3: Tôi đã thấy cả router.navigateToRoute và bộ định tuyến.điều hướng được tham chiếu, nhưng không có chỉ báo khi sử dụng hoặc sự khác biệt là gì và tài liệu không được giải thích. Nên sử dụng cái nào? Tài liệu

Phương pháp router.navigate(fragment: string, options?: any) sử dụng phân đoạn URL không phải là tên tuyến đường để điều hướng, vì vậy ví dụ: router.navigate('#/app/child', {...<options - not params od the URL>...}). Phương pháp này phải được sử dụng để điều hướng hoàn toàn giữa các bộ định tuyến và truy cập URL mẹ v.v.

Nếu bạn chỉ điều hướng xung quanh bộ định tuyến hiện tại, bạn sẽ luôn sử dụng router.navigateToRoute(route: string, params?: any, options?: any). Phương pháp này sử dụng tên đường, không phải URL, chúng tôi chỉ đặt tên đường trong bản đồ định tuyến tùy chỉnh (tùy chỉnh có nghĩa là bản đồ định tuyến con hiện tại hoặc định tuyến chính hiện tại liên quan đến vị trí URL chúng tôi đang ở trên trang). Ở đây bạn có thể chuyển các tham số URL theo cách thuận tiện hơn, như bạn có thể thấy. Bạn có thể sử dụng đối tượng params thay vì ghép nối URL với thông số.

Q.4: Một lần nữa, tôi muốn định tuyến tương đối, ngay cả trong trang HTML. Ở trên sẽ không hoạt động, vì vậy tôi nên sử dụng những gì?

Trong Aurelia, chúng tôi không sử dụng thuộc tính href trực tiếp cho điều hướng. Như đã được Brandon trả lời, bạn phải sử dụng thuộc tính route-href, có thể không có tài liệu nào xuất hiện xung quanh trên các diễn đàn và cổng. Đây là tương đương với router.navigateToRoute(route: string, params?: any, options?: any), vì vậy bạn không thể sử dụng nó để di chuyển giữa các router trong trường hợp như vậy, bạn có thể sử dụng thuộc tính tùy chỉnh hoặc chỉ sử dụng click.triger="navTo('#/app/child')", nơi mà các phương pháp navTo() được thực hiện trong bạn xem mẫu và trông như thế này:

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

Và cuối cùng bạn câu hỏi chủ đề:

Q.1: Làm thế nào điều hướng giữa các tuyến trẻ

Có lẽ bây giờ bạn biết câu trả lời, chỉ cần sử dụng: router.navigate(fragment: string, options?: any) với URL tuyệt đối.

Dưới dụ tùy chỉnh thuộc tính để giải quyết này:

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

Trước tiên, bạn cần phải nhập nó trong HTML của bạn, tôi tên là nav.href.ts tập tin của tôi:

<require from="common/nav.href"></require> 

Sau đó chỉ cần sử dụng nó trong bạn mã HTML:

<a nav-href="#/home/any-location">My link to any location</a> 

Hy vọng điều này sẽ giúp bạn, cheers :-)