1、什么是 Blazor 路由？

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

核心組件

• Router 組件：管理路由匹配和導航
• Route 屬性：定義組件與URL的映射關系
• NavigationManager：提供編程式導航能力

2、基礎路由配置

1. 應用級路由設置

一般在app.razor文件可以看到路由視圖的定義，這個稱之為路由模板，當找到相匹配的視圖時，會在<Found></Found>節點里面渲染出來，如果沒有的話會在<NotFound></NotFound>節點里面渲染，當然你也可以自定義一個404的頁面。里面的DefaultLayout表示默認布局組件，Layout表示指定的布局組件，這些在前面的布局里面講到過。

2. 頁面路由定義

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

一個組件也可以設置多個路由訪問。

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

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

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

3、路由參數

1. 基本路由參數

設置路由參數只需要兩步就可以設置路由參數

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

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

<!-- 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. 路由約束

{路有參數名:參數類型} 表示路由約束，可以限定參數的類型，當參數類型不匹配時,就會跳到錯誤頁面

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

<h1>產品頁面</h1>


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

@code {

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

約束可用參數類型表：

3. 可選參數

<!-- 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、編程式導航

1. 使用 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("https://www.hwtx.top", forceLoad: true);
    }
}

2. 帶查詢參數的導航

<!-- 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. 路由事件處理

<!-- 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、布局和嵌套路由

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. 嵌套路由配置

<!-- 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. 主布局和導航

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 路由配置和導航》的所有內容，感謝你的閱讀，希望對你有所收獲。如果可用的話，給我點個贊??吧。