Hệ thống định tuyến của Blazor cung cấp các tùy chọn linh hoạt mà bạn có thể sử dụng để đảm bảo rằng các yêu cầu của người dùng đến được một component có thể xử lý chúng và trả về thông tin mà người dùng muốn.
sử dụng route templates
Blazor định tuyến các yêu cầu bằng một component chuyên biệt được gọi là Router component. Thêm hoặc chỉnh sửa component này trong App.razor component và sử dụng các subtags và thuộc tính của nó để định cấu hình nó:
<Router AppAssembly="@typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> </Found> <NotFound> <p>Sorry, we haven't found any pizzas here.</p> </NotFound> </Router>
Khi app start Blazor sẽ kiểm tra AppAssembly attribute và tìm assembly nên được scan. Nó quét assembly cho components mà có RouteAttribute . Sử dụng những gia trị này, Blazor biên dịch một đối tượng RouteData chỉ định cách các yêu cầu được chuyển đến các components. Khi bạn viết mã ứng dụng, bạn sử dụng lệnh @page trong mỗi thành phần để cố định RouteAttribute.
Trong đoạn mã trước, thẻ <Found> chỉ định thành phần xử lý việc định tuyến trong runtime: RouteView component, component này nhận đối tượng RouteData và bất kỳ tham số nào từ URL hoặc chuỗi truy vấn. Sau đó, nó hiển thị thành phần được chỉ định và bố cục của nó. Bạn có thể sử dụng thẻ <Found> để chỉ định bố cục mặc định, sẽ được sử dụng khi component đã chọn không chỉ định bố cục với chỉ thị @layout.
trong <Router> component, bạn cũng có thể chỉ định những gì được trả lại cho người dùng khi không có tuyến phù hợp, bằng cách sử dụng thẻ <NotFound>. Ví dụ trước trả về một đoạn <p> nhưng bạn có thể hiển thị HTML phức tạp hơn. Ví dụ: nó có thể bao gồm một liên kết đến trang chủ hoặc một trang liên hệ dành cho quản trị viên trang web.
sử dụng @page directive
Trong một Blazor component, chỉ thị @page chỉ định rằng component đó sẽ xử lý các yêu cầu trực tiếp. Bạn có thể chỉ định một RouteAttribute trong chỉ thị @page bằng cách chuyển nó dưới dạng một chuỗi. Ví dụ: sử dụng thuộc tính này để chỉ định rằng trang xử lý các yêu cầu đối với tuyến đường /Pizza:
@page "/Pizzas"
Nếu bạn muốn chỉ định nhiều tuyến đến component, hãy sử dụng hai hoặc nhiều chỉ thị @page:
@page "/Pizzas"
@page "/CustomPizzas
Nhận thông tin vị trí và điều hướng với NavigationManager
Giả sử bạn viết một thành phần để xử lý các URI mà người dùng yêu cầu, chẳng hạn như
http://duyanhpham.com/pizzas/margherita/?extratopping=pineapple.
Khi bạn viết một component, bạn có thể cần quyền truy cập vào thông tin điều hướng như:
- Full URL hiện tại,
http://duyanhpham.com/pizzas/margherita?extratopping=pineapple. - base URI:
http://duyanhpham.com/. - Đường dẫn tương đối cơ sở:
pizzas/margherita. - query string:
?extratopping=pineapple.
bạn có thể sử dụng NavigationManager để có được tất cả các giá trị trên. Bạn phải inject đối tượng vào component và sau đó bạn có thể truy cập các thuộc tính của nó. Mã này sử dụng đối tượng NavigationManager để lấy URL cơ sở của trang web và sau đó sử dụng nó để đặt liên kết đến trang chủ:
@page "/pizzas"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<a href=@HomePageURI>Home Page</a>
@code {
[Parameter]
public string PizzaName { get; set; }
public string HomePageURI { get; set; }
protected override void OnInitialized()
{
HomePageURI = NavManager.BaseUri
}
}
Để truy cập chuỗi truy vấn, bạn phải phân tích cú pháp toàn bộ URI. Sử dụng lớp QueryHelpers từ hợp ngữ Microsoft.AspNetCore.WebUtilities để thực thi phân tích cú pháp này:
@page "/pizzas"
@using Microsoft.AspNetCore.WebUtilities
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<p>I want to add this topping: @ToppingName</p>
@code {
[Parameter]
public string PizzaName { get; set; }
private string ToppingName { get; set; }
protected override void OnInitialized()
{
StringValues extraTopping;
var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("extratopping", out extraTopping))
{
ToppingName = System.Convert.ToString(extraTopping);
}
}
}
Với component trước đó được triển khai, nếu người dùng yêu cầu URI http://duyanhpham.com/pizzas?extratopping=Pineapple, họ sẽ thấy thông báo”I want to add this topping: Pineapple” trong trang được render.
Bạn cũng có thể sử dụng đối tượng NavigationManager để gửi người dùng của mình đến một component khác trong mã bằng cách gọi phương thức NavigationManager.NavigateTo ():
@page "/pizzas/{pizzaname}"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<button class="btn" @onclick="NavigateToPaymentPage">
Buy this pizza!
</button>
@code {
[Parameter]
public string PizzaName { get; set; }
private void NavigateToPaymentPage()
{
NavManager.NavigateTo("buypizza");
}
}
Chuỗi mà bạn chuyển đến phương thức NavigateTo () là URL tuyệt đối hoặc tương đối mà bạn muốn gửi cho người dùng. Đảm bảo rằng bạn có một component được thiết lập tại địa chỉ đó. Đối với mã trước, một component có chỉ thị @page “/buypizza” sẽ xử lý route này.
Sử dụng NavLink components
Trong một trong các ví dụ trước, mã được sử dụng để lấy giá trị NavigationManager.BaseUri và sử dụng nó để đặt thuộc tính href của thẻ <a> cho trang chủ. Trong Blazor, sử dụng NavLink component để hiển thị thẻ <a> vì nó chuyển đổi một lớp active class khi thuộc tính href của liên kết khớp với URL hiện tại. Bằng cách tạo kiểu cho active class, bạn có thể làm rõ cho người dùng biết liên kết điều hướng nào dành cho trang hiện tại.
Khi bạn sử dụng NavLink, ví dụ liên kết trang chủ sẽ giống như mã sau:
@page "/pizzas"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<NavLink href=@HomePageUri Match="NavLinkMatch.All">Home Page</NavLink>
@code {
[Parameter]
public string PizzaName { get; set; }
public string HomePageURI { get; set; }
protected override void OnInitialized()
{
HomePageURI = NavManager.BaseUri
}
}
Thuộc tính Match trong NavLink component được sử dụng để quản lý khi liên kết được đánh dấu. Có hai lựa chọn:
- NavLinkMatch.All: Khi bạn sử dụng giá trị này, liên kết chỉ được đánh dấu là liên kết hoạt động khi href của nó khớp với toàn bộ URL hiện tại.
- NavLinkMatch.Prefix: Khi bạn sử dụng giá trị này, liên kết được đánh dấu là đang hoạt động khi href của nó khớp với phần đầu tiên của URL hiện tại. Ví dụ: giả sử bạn có liên kết <NavLink href = “pizzas” Match = “NavLinkMatch.Prefix”>. Liên kết này sẽ được đánh dấu là đang hoạt động khi URL hiện tại là http://duyanhpham.com/pizzas và cho bất kỳ vị trí nào trong URL đó, chẳng hạn như http://duyanhpham.com/pizzas/formaggio. Hành vi này có thể giúp người dùng hiểu được phần nào của trang web mà họ hiện đang xem.
theo: https://docs.microsoft.com/en-us/learn/modules/use-pages-routing-layouts-control-blazor-navigation/2-use-router-component-control-apps-navigation