1、什(shen)么是 Blazor 路由？

Blazor 路由(you)是一個將 URL 映射到特定組件的系統，允許構建(jian)單頁應用(yong)（SPA）而無(wu)需頁面刷(shua)新(xin)。

核(he)心組件

• Router 組(zu)件：管理路由匹配和導航(hang)
• Route 屬性：定義組件與URL的映(ying)射(she)關(guan)系(xi)
• NavigationManager：提供(gong)編程式導航能力

2、基礎路由配置

1. 應用級路由(you)設置

一(yi)(yi)般在app.razor文(wen)件可以(yi)看(kan)到(dao)路(lu)由(you)(you)視(shi)圖的(de)定(ding)義，這(zhe)個稱之為路(lu)由(you)(you)模板，當找到(dao)相匹配的(de)視(shi)圖時，會在<Found></Found>節點里(li)(li)面渲染出來，如果(guo)沒有的(de)話(hua)會在<NotFound></NotFound>節點里(li)(li)面渲染，當然你也可以(yi)自(zi)定(ding)義一(yi)(yi)個404的(de)頁(ye)面。里(li)(li)面的(de)DefaultLayout表示(shi)默認布(bu)局(ju)組(zu)件，Layout表示(shi)指定(ding)的(de)布(bu)局(ju)組(zu)件，這(zhe)些在前面的(de)布(bu)局(ju)里(li)(li)面講(jiang)到(dao)過(guo)。

2. 頁面(mian)路由定義

在Blazor中使用 @page “url路(lu)徑” 來表示路(lu)由地址，比如/home，那么該頁面的(de)請求地址就(jiu)是域名:端口號/home；

一個組件也可(ke)以設置多個路由訪(fang)問。

<!-- Pages/Index.razor -->
@page "/"
@page "/home"

<h1>歡迎來到首頁</h1>
<p>當前時間: @DateTime.Now</p>

@code {
    protected override void OnInitialized()
    {
        Console.WriteLine("首頁初始化完成");
    }
}

3、路由參(can)數

1. 基本路由(you)參數

設置路由參數只需(xu)要(yao)兩步(bu)就可以設置路由參數

1，在@page 后面的url中使用{路由參數名}的占(zhan)位符格式標明

2，在@code里面(mian)申名(ming)一(yi)個帶有[Parameter]特性的(de)屬性，這里是不分大小寫(xie)的(de)，userName也可以獲取(qu)到

<!-- Pages/UserProfile.razor -->
@page "/user/{UserName}"

<h1>用戶資料</h1>
<p>用戶ID: @UserName</p>

@code {
    [Parameter]
    public string UserName { get; set; }

    protected override void OnParametersSet()
    {
        // 參數變化時執行
        Console.WriteLine($"加載用戶 {UserName} 的資料");
    }
}

2. 路由約束

{路(lu)有(you)參(can)數(shu)名(ming):參(can)數(shu)類型} 表示路(lu)由約(yue)束，可以限定參(can)數(shu)的類型，當參(can)數(shu)類型不匹配(pei)時,就會跳(tiao)到錯(cuo)誤(wu)頁面

<!-- Pages/Product.razor -->
@page "/product/{Id:int}"

<h1>產品頁面</h1>


@if (Id > 0)
{
    <p>產品ID: @Id</p>
}

@code {

    [Parameter]
    public int Id { get; set; }
}

約束可用參數類型表：

3. 可選參數(shu)

<!-- Pages/Product.razor -->
@page "/product/{Id:int}"
@page "/product/{Category}/{Id:int}"

<h1>產品頁面</h1>

@if (string.IsNullOrEmpty(Category))
{
    <p>所有產品</p>
}
else
{
    <p>分類: @Category</p>
}

@if (Id > 0)
{
    <p>產品ID: @Id</p>
}

@code {
    [Parameter]
    public string? Category { get; set; }

    [Parameter]
    public int Id { get; set; }
}

4. 捕獲所有路由

<!-- Pages/CatchAll.razor -->
@page "/docs/{*path}"

<h1>文檔查看器</h1>
<p>請求的路徑: @Path</p>

@code {
    [Parameter]
    public string? Path { get; set; }
}

4、編程式(shi)導航(hang)

1. 使用(yong) NavigationManager

<!-- Pages/NavigationDemo.razor -->
@page "/navigation"
@inject NavigationManager Navigation

<h1>導航演示</h1>

<button @onclick="GoToHome" class="btn btn-primary">返回首頁</button>
<button @onclick="GoToUserProfile" class="btn btn-secondary">查看用戶資料</button>
<button @onclick="GoBack" class="btn btn-outline">返回上一頁</button>
<button @onclick="OpenExternal" class="btn btn-info">打開外部鏈接</button>

@code {
    private void GoToHome()
    {
        Navigation.NavigateTo("/");
    }

    private void GoToUserProfile()
    {
        Navigation.NavigateTo("/user/123");
    }

    private void GoBack()
    {
        Navigation.NavigateTo("/previous-page");
    }

    private void OpenExternal()
    {
        Navigation.NavigateTo("//www.hwtx.top", forceLoad: true);
    }
}

2. 帶查詢參數的(de)導航

<!-- Pages/Search.razor -->
@page "/search"
@inject NavigationManager Navigation

<h1>搜索頁面</h1>

<input @bind="searchTerm" placeholder="輸入搜索關鍵詞" />
<button @onclick="PerformSearch" class="btn btn-primary">搜索</button>

@if (!string.IsNullOrEmpty(SearchTerm))
{
    <p>搜索關鍵詞: @SearchTerm</p>
}

@code {
    private string searchTerm = string.Empty;

    [Parameter]
    [SupplyParameterFromQuery(Name = "q")]
    public string? SearchTerm { get; set; }

    protected override void OnParametersSet()
    {
        if (!string.IsNullOrEmpty(SearchTerm))
        {
            searchTerm = SearchTerm;
        }
    }

    private void PerformSearch()
    {
        var query = System.Web.HttpUtility.ParseQueryString(string.Empty);
        query["q"] = searchTerm;
        
        Navigation.NavigateTo($"/search?{query}");
    }
}

5、高級路由功能

1. 路由事(shi)件(jian)處理

<!-- Pages/RouteAwareComponent.razor -->
@page "/aware"
@inject NavigationManager Navigation
@implements IDisposable

<h1>路由感知組件</h1>
<p>位置變化次數: @locationChangeCount</p>

@code {
    private int locationChangeCount = 0;

    protected override void OnInitialized()
    {
        Navigation.LocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        locationChangeCount++;
        Console.WriteLine($"位置變化: {e.Location}");
        StateHasChanged(); // 通知組件重新渲染
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= OnLocationChanged;
    }
}

6、布局(ju)和嵌套(tao)路(lu)由

1. 多布局系統

<!-- Pages/Dashboard.razor -->
@page "/dashboard"
@layout MainLayout

<h1>儀表板</h1>


@inherits LayoutComponentBase

<div class="admin-layout">
    <nav class="sidebar">
        <h3>管理菜單</h3>
        <NavLink href="/dashboard" Match="NavLinkMatch.All">儀表板</NavLink>
        <NavLink href="/users">用戶管理</NavLink>
        <NavLink href="/settings">系統設置</NavLink>
    </nav>

    <main class="main-content">
        @Body
    </main>
</div>

2. 嵌套(tao)路由(you)配(pei)置

<!-- Pages/Admin.razor -->
@page "/admin/*"

<h1>管理控制臺</h1>

<nav>
    <NavLink href="/admin/dashboard">儀表板</NavLink>
    <NavLink href="/admin/users">用戶</NavLink>
    <NavLink href="/admin/settings">設置</NavLink>
</nav>

<div class="admin-content">
    <!-- 嵌套路由內容 -->
</div>

7、完整示例應用

1. 主(zhu)布局和導航(hang)

2. 導航菜單

3. 用戶管理頁面

<!-- Pages/UserManagement.razor -->
@page "/users"
@page "/users/{Action:string}/{Id:int}"

<h1>用戶管理</h1>

@if (Action == "edit" && Id > 0)
{
    <UserEditor UserId="@Id" />
}
else if (Action == "create")
{
    <UserCreator />
}
else
{
    <UserList />
}

@code {
    [Parameter]
    public string? Action { get; set; }

    [Parameter]
    public int Id { get; set; }
}

<h3>編輯用戶</h3>
<p>用戶ID: @UserId</p>
@code {

	[Parameter]
	public int UserId
	{
		get; set;
	}
}

<h3>添加用戶</h3>

@code {

}

<h3>用戶列表</h3>

@code {

}

以上就是《ASP.NET Core Blazor 路由配置和導(dao)航》的所有內(nei)容，感謝你(ni)的閱讀，希望對你(ni)有所收獲。如果可用的話，給我點個贊(zan)??吧(ba)。