Làm thế nào để bạn xác định một tên tuyến đường?

Question

Cùng với


  User

22, bạn có thể cung cấp một


  User

23 cho bất kỳ tuyến đường nào. Điều này có những ưu điểm sau

Nội dung chính Show

Tuyến đường cơ bản
Các tuyến đường lồng nhau
Lộ trình ứng dụng
Lộ trình chỉ mục
Khi nào nên sử dụng một tuyến đường chỉ mục
Phân đoạn động
Các tuyến đường ký tự đại diện/toàn cầu hóa
Trình xử lý tuyến đường
Chuyển tiếp giữa các tuyến đường
Tuyến đường được đặt tên chính xác là gì?
Tuyến đường được định nghĩa như thế nào trong bộ điều khiển?
Làm cách nào để xác định tuyến đường trong Laravel 8?
Làm cách nào để xác định tuyến đường trong Laravel?

Không có URL được mã hóa cứng
Mã hóa/giải mã tự động của
```
  User
```
24
Ngăn bạn mắc lỗi đánh máy trong url
Bỏ qua xếp hạng đường dẫn (e. g. để hiển thị một)

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

Để liên kết đến một tuyến đường được đặt tên, bạn có thể chuyển một đối tượng tới prop126 của thành phần


  User

25


  User

Đây chính xác là cùng một đối tượng được sử dụng theo chương trình với


  User

27

router.push({ name: 'user', params: { username: 'erina' } })

Trong cả hai trường hợp, bộ định tuyến sẽ điều hướng đến đường dẫn


  User

28

Ví dụ đầy đủ ở đây

Khi ứng dụng của bạn bắt đầu, bộ định tuyến sẽ khớp URL hiện tại với các tuyến đường mà bạn đã xác định. Ngược lại, các tuyến chịu trách nhiệm hiển thị các mẫu, tải dữ liệu và thiết lập trạng thái ứng dụng

Để xác định tuyến đường, hãy chạy

ember generate route route-name

Thao tác này tạo tệp tuyến đường tại

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

6, mẫu cho tuyến đường tại

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

7 và tệp thử nghiệm đơn vị tại

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

8. Nó cũng thêm tuyến đến bộ định tuyến

Tuyến đường cơ bản

Phương pháp

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

9 của bộ định tuyến ứng dụng Ember của bạn có thể được gọi để xác định ánh xạ URL. Khi gọi

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

9, bạn nên chuyển một hàm sẽ được gọi với giá trị

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

1 được đặt cho một đối tượng mà bạn có thể sử dụng để tạo các tuyến đường


  User

0

Bây giờ, khi người dùng truy cập

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

2, Ember sẽ hiển thị mẫu

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

3. Truy cập

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

4 sẽ hiển thị mẫu

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

5

Bạn có thể rời khỏi đường dẫn nếu nó giống với tên tuyến đường. Trong trường hợp này, điều sau đây tương đương với ví dụ trên

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

Bên trong các mẫu của bạn, bạn có thể sử dụng

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

6 để điều hướng giữa các tuyến, sử dụng tên mà bạn đã cung cấp cho phương thức

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

7

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

Thành phần

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

6 cũng sẽ thêm một lớp

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

9 vào liên kết trỏ đến tuyến hiện đang hoạt động

Tên tuyến đường nhiều từ được quy ước gạch ngang, chẳng hạn như

router.push({ name: 'user', params: { username: 'erina' } })

1

Tuyến đường được xác định ở trên theo mặc định sẽ sử dụng trình xử lý tuyến đường

router.push({ name: 'user', params: { username: 'erina' } })

10, mẫu

router.push({ name: 'user', params: { username: 'erina' } })

11 và được gọi là

router.push({ name: 'user', params: { username: 'erina' } })

12 trong bất kỳ thành phần

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

6 nào

Tên tuyến đường nhiều từ phá vỡ quy ước này, chẳng hạn như

router.push({ name: 'user', params: { username: 'erina' } })

6

theo mặc định sẽ vẫn sử dụng trình xử lý tuyến đường

router.push({ name: 'user', params: { username: 'erina' } })

10 và mẫu

router.push({ name: 'user', params: { username: 'erina' } })

11, nhưng sẽ được gọi là

router.push({ name: 'user', params: { username: 'erina' } })

16 trong bất kỳ thành phần

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

6 nào

Các tuyến đường lồng nhau

Thường thì bạn sẽ muốn có một mẫu hiển thị bên trong một mẫu khác. Ví dụ: trong một ứng dụng viết blog, thay vì đi từ danh sách các bài đăng trên blog để tạo một bài đăng mới, bạn có thể muốn hiển thị trang tạo bài đăng bên cạnh danh sách

Trong những trường hợp này, bạn có thể sử dụng các tuyến đường lồng nhau để hiển thị một mẫu bên trong một mẫu khác

Bạn có thể xác định các tuyến đường lồng nhau bằng cách chuyển một cuộc gọi lại tới

router.push({ name: 'user', params: { username: 'erina' } })

18

ember generate route route-name

2

Giả sử bạn đã tạo tuyến đường

router.push({ name: 'user', params: { username: 'erina' } })

19, để tạo tuyến đường lồng nhau ở trên, bạn sẽ chạy

ember generate route route-name

4

Và sau đó thêm trình trợ giúp

router.push({ name: 'user', params: { username: 'erina' } })

60 vào mẫu của bạn nơi bạn muốn mẫu lồng nhau hiển thị. Bạn cũng có thể thêm tiêu đề trang với tên trang hiện tại (sử dụng ), điều này sẽ giúp người dùng có công nghệ hỗ trợ biết họ đang ở đâu trong trang web

ember generate route route-name

6

Điều này tạo ra một tuyến đường cho

router.push({ name: 'user', params: { username: 'erina' } })

61 và cho

router.push({ name: 'user', params: { username: 'erina' } })

62. Khi người dùng truy cập

router.push({ name: 'user', params: { username: 'erina' } })

61, họ sẽ chỉ thấy mẫu

router.push({ name: 'user', params: { username: 'erina' } })

64. (Dưới đây, giải thích một bổ sung quan trọng cho điều này. ) Khi người dùng truy cập vào

router.push({ name: 'user', params: { username: 'erina' } })

65, họ sẽ thấy mẫu

router.push({ name: 'user', params: { username: 'erina' } })

66 được hiển thị thành

router.push({ name: 'user', params: { username: 'erina' } })

60 của mẫu

router.push({ name: 'user', params: { username: 'erina' } })

19

Tên tuyến đường lồng nhau bao gồm tên của tổ tiên của nó. Nếu bạn muốn chuyển sang một tuyến đường (thông qua

router.push({ name: 'user', params: { username: 'erina' } })

69 hoặc

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

6), hãy đảm bảo sử dụng tên đầy đủ của tuyến đường (

ember generate route route-name

21, không phải

ember generate route route-name

22)

Lộ trình ứng dụng

Lộ trình

ember generate route route-name

23 được nhập khi ứng dụng của bạn khởi động lần đầu tiên. Giống như các route khác, nó sẽ tải một template có cùng tên (trong trường hợp này là ____323) theo mặc định. Bạn nên đặt tiêu đề, chân trang và bất kỳ nội dung trang trí nào khác ở đây. Tất cả các route khác sẽ hiển thị các mẫu của chúng thành

router.push({ name: 'user', params: { username: 'erina' } })

60 của mẫu

ember generate route route-name

25

Lộ trình này là một phần của mọi ứng dụng, vì vậy bạn không cần chỉ định nó trong

ember generate route route-name

27 của mình

Lộ trình chỉ mục

Ở mọi cấp độ lồng nhau (bao gồm cả cấp cao nhất), Ember tự động cung cấp tuyến đường cho đường dẫn

ember generate route route-name

28 có tên là

ember generate route route-name

29. Để biết khi nào một cấp độ lồng ghép mới xảy ra, hãy kiểm tra bộ định tuyến, bất cứ khi nào bạn thấy một

ember generate route route-name

40, đó là một cấp độ mới

Ví dụ: nếu bạn viết một bộ định tuyến đơn giản như thế này

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

7

Nó tương đương với


  User

00

Mẫu

ember generate route route-name

29 sẽ được hiển thị thành

router.push({ name: 'user', params: { username: 'erina' } })

60 trong mẫu

ember generate route route-name

23. Nếu người dùng điều hướng đến

ember generate route route-name

44, Ember sẽ thay thế mẫu

ember generate route route-name

29 bằng mẫu

<LinkTo @route="index">
  <img class="logo">
</LinkTo>

<nav>
  <LinkTo @route="about">About</LinkTo>
  <LinkTo @route="favorites">Favorites</LinkTo>
</nav>

5

Một bộ định tuyến lồng nhau như thế này


  User

01

tương đương với


  User

02

Tương tự như vậy, nếu người dùng điều hướng đến

router.push({ name: 'user', params: { username: 'erina' } })

61, tuyến đường hiện tại sẽ là

ember generate route route-name

48 và mẫu

ember generate route route-name

49 sẽ được kết xuất thành

router.push({ name: 'user', params: { username: 'erina' } })

60 của mẫu

router.push({ name: 'user', params: { username: 'erina' } })

19

Nếu sau đó người dùng điều hướng đến

ember generate route route-name

62, Ember sẽ thay thế

router.push({ name: 'user', params: { username: 'erina' } })

60 trong mẫu

router.push({ name: 'user', params: { username: 'erina' } })

19 bằng mẫu

ember generate route route-name

65

Các tình huống sau đây có thể giúp hiểu được tuyến đường

ember generate route route-name

29

Lộ trình chỉ mục cấp cao nhất tương tự như
```
ember generate route route-name
```
67. Ví dụ: khi ai đó truy cập vào
```
ember generate route route-name
```
68, nội dung của tệp
```
ember generate route route-name
```
69 sẽ được hiển thị. Không cần thêm mục
```
Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});
```
70 vào tệp
```
ember generate route route-name
```
27. Lộ trình
```
ember generate route route-name
```
29 được bao gồm hoàn toàn để giúp giảm bớt các khai báo dài dòng trong
```
ember generate route route-name
```
27. Tệp
```
ember generate route route-name
```
27 có thể trống và tệp
```
ember generate route route-name
```
29 vẫn sẽ được hiển thị


  User

03

Khi người dùng điều hướng đến

router.push({ name: 'user', params: { username: 'erina' } })

61, nội dung của

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

77 sẽ được hiển thị. Điều này tương tự như việc người dùng điều hướng đến route con của

router.push({ name: 'user', params: { username: 'erina' } })

61.

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

79 là một route con như


  User

000 hoặc


  User

001

Khi nào nên sử dụng một tuyến đường chỉ mục

Lộ trình chỉ mục hữu ích nhất để hiển thị chế độ xem khi tuyến đường đã được xác định trong đó hoặc có các tuyến đường lồng nhau. Nói cách khác, một mẫu

ember generate route route-name

29 được sử dụng để hiển thị nội dung không nên có trên các tuyến đường anh chị em và con. Ví dụ: một ứng dụng blog có thể có một tuyến đường

ember generate route route-name

29 hiển thị danh sách tất cả các bài đăng, nhưng nếu người dùng nhấp vào một bài đăng, họ sẽ chỉ thấy nội dung của từng bài đăng. Đây là cách nó trông trong thực tế

Tệp


  User

004 có nội dung sau


  User

04

Tệp


  User

005 có nội dung sau


  User

05

Tệp


  User

006 có nội dung sau


  User

06

Điều này tương đương với việc có mục sau trong tệp

ember generate route route-name

27


  User

07

Khi người dùng điều hướng đến


  User

008, đánh dấu sau sẽ được nhìn thấy


  User

08

Khi người dùng điều hướng đến


  User

009, đánh dấu sau sẽ được nhìn thấy


  User

09

Phân đoạn động

Một trong những nhiệm vụ của một tuyến đường là tải một mô hình

Ví dụ: nếu chúng tôi có tuyến đường


  User

010, tuyến đường của chúng tôi có thể tải tất cả các bài đăng trên blog cho ứng dụng

Bởi vì

router.push({ name: 'user', params: { username: 'erina' } })

61 đại diện cho một mô hình cố định, chúng tôi không cần bất kỳ thông tin bổ sung nào để biết những gì cần truy xuất. Tuy nhiên, nếu chúng tôi muốn một tuyến đại diện cho một bài đăng, chúng tôi sẽ không muốn mã hóa cứng mọi bài đăng có thể vào bộ định tuyến

Nhập phân đoạn động

Phân đoạn động là một phần của URL bắt đầu bằng


  User

012 và theo sau là số nhận dạng

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

0

Nếu người dùng điều hướng đến


  User

013, thì tuyến đường sẽ có


  User

014 của


  User

015 để sử dụng để tải đúng bài đăng. Ember tuân theo quy ước của


  User

016 vì hai lý do. Lý do đầu tiên là các Tuyến biết cách tìm đúng mô hình theo mặc định, nếu bạn tuân theo quy ước. Thứ hai là


  User

017 là một đối tượng và chỉ có thể có một giá trị được liên kết với một khóa. Để đưa nó vào mã, phần sau sẽ không hoạt động bình thường

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

1

Nhưng sau đây sẽ

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

2

Trong phần tiếp theo, Chỉ định mô hình của tuyến đường, bạn sẽ tìm hiểu thêm về cách tải mô hình

Các tuyến đường ký tự đại diện/toàn cầu hóa

Bạn có thể xác định các tuyến ký tự đại diện sẽ khớp với nhiều phân đoạn URL. Ví dụ: điều này có thể được sử dụng nếu bạn muốn một lộ trình tổng hợp, hữu ích khi người dùng nhập một URL không chính xác không được ứng dụng của bạn quản lý. Các tuyến ký tự đại diện bắt đầu bằng dấu hoa thị

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

3

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

4

Trong ví dụ trên, chúng tôi đã sử dụng thành công tuyến đường ký tự đại diện để xử lý tất cả các tuyến đường không được ứng dụng của chúng tôi quản lý để khi người dùng điều hướng đến


  User

018, họ sẽ thấy thông báo cho biết không tìm thấy trang họ đang tìm kiếm

Lưu ý rằng nếu bạn muốn chuyển sang tuyến ký tự đại diện này theo cách thủ công, bạn cần chuyển một đối số tùy ý (không trống). Ví dụ: sử dụng Dữ liệu Ember để tìm bản ghi

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

5

Trình xử lý tuyến đường

Để tuyến đường của bạn thực hiện điều gì đó ngoài việc hiển thị mẫu có cùng tên, bạn sẽ cần tạo trình xử lý tuyến đường. Các hướng dẫn sau đây sẽ khám phá các tính năng khác nhau của trình xử lý tuyến đường. Để biết thêm thông tin về các tuyến đường, hãy xem tài liệu API dành cho bộ định tuyến và các trình xử lý tuyến đường

Chuyển tiếp giữa các tuyến đường

Khi các tuyến đường được xác định, làm thế nào để chúng ta chuyển đổi giữa chúng trong ứng dụng của mình?

Tuyến đường được đặt tên chính xác là gì?

Các route được đặt tên là một tính năng quan trọng trong Laravel framework. Nó cho phép bạn tham khảo các tuyến khi tạo URL hoặc chuyển hướng đến các tuyến cụ thể. Tóm lại, chúng ta có thể nói rằng cách đặt tên tuyến đường là cách cung cấp biệt hiệu cho tuyến đường .

Tuyến đường được định nghĩa như thế nào trong bộ điều khiển?

Mẫu tuyến đường "{controller=Home}/{action=Index}/{id?}". .

So khớp với đường dẫn URL như /Products/Details/5

Trích xuất các giá trị tuyến đường { controller = Products, action = Details, id = 5 } bằng cách mã hóa đường dẫn. .

Mô hình /Products/Details/5 liên kết giá trị của id = 5 để đặt tham số id thành 5

Làm cách nào để xác định tuyến đường trong Laravel 8?

Định nghĩa tuyến đường trong Laravel . using the Route class with an HTTP verb, the route to respond to, and a closure, or a controller method.

Làm cách nào để xác định tuyến đường trong Laravel?

Tất cả các route của Laravel được xác định trong các tệp route của bạn, nằm trong thư mục routes . Các tệp này được tải tự động bởi App\Providers\RouteServiceProvider của ứng dụng của bạn. Các tuyến đường/web. tệp php xác định các tuyến dành cho giao diện web của bạn.

programming