ASP.NET Core Blazor 路由配置和导航_blazor中 navigationmanager怎么使用-CSDN博客

由事件监听和嵌套路由布局。文章通过代码示例演示了用户管理、产品展示等典型场景的实现方式，完整呈现了Blazor路由从基础配置到复杂应用的全套解决方案。

1、什么是 Blazor 路由？

Blazor 路由是一个将 URL 映射到特定组件的系统，允许构建单页应用（SPA）而无需页面刷新。

核心组件

Router 组件：管理路由匹配和导航

Route 属性：定义组件与URL的映射关系

NavigationManager：提供编程式导航能力

2、基础路由配置

1. 应用级路由设置

一般在app.razor文件可以看到路由视图的定义，这个称之为路由模板，当找到相匹配的视图时，会在<Found></Found>节点里面渲染出来，如果没有的话会在<NotFound></NotFound>节点里面渲染，当然你也可以自定义一个404的页面。里面的DefaultLayout表示默认布局组件，Layout表示指定的布局组件，这些在前面的布局里面讲到过。

image

2. 页面路由定义

在Blazor中使用 @page “url路径” 来表示路由地址，比如/home，那么该页面的请求地址就是域名:端口号/home；

一个组件也可以设置多个路由访问。

@page "/"

@page "/home"

<h1>欢迎来到首页</h1>

<p>当前时间: @DateTime.Now</p>

@code {

protected override void OnInitialized()

{

Console.WriteLine("首页初始化完成");

}

image

3、路由参数

1. 基本路由参数

设置路由参数只需要两步就可以设置路由参数

1，在@page 后面的url中使用{路由参数名}的占位符格式标明

2，在@code里面申名一个带有[Parameter]特性的属性，这里是不分大小写的，userName也可以获取到

@page "/user/{UserName}"

<p>用户ID: @UserName</p>

@code {

[Parameter]

public string UserName { get; set; }

protected override void OnParametersSet()

{

// 参数变化时执行

Console.WriteLine($"加载用户 {UserName} 的资料");

}

http://localhost:端口/user/码农刚子

image (2)

2. 路由约束

{路有参数名:参数类型} 表示路由约束，可以限定参数的类型，当参数类型不匹配时,就会跳到错误页面

@page "/product/{Id:int}"

@if (Id > 0)

{

}

@code {

[Parameter]

public int Id { get; set; }

}

http://localhost:端口/product/100

image (3)

http://localhost:端口/product/100b

image (1)

约束可用参数类型表：

约束

示例

匹配项示例

固定条件

区域性

匹配

bool

{active:bool}

true、FALSE

否

datetime

{dob:datetime}

2016-12-31、2016-12-31 7:32pm

是

decimal

{price:decimal}

49.99、-1,000.01

是

double

{weight:double}

1.234、-1,001.01e8

是

float

{weight:float}

1.234、-1,001.01e8

是

guid

{id:guid}

00001111-aaaa-2222-bbbb-3333cccc4444、{00001111-aaaa-2222-bbbb-3333cccc4444}

否

int

{id:int}

123456789、-123456789

是

long

{ticks:long}

123456789、-123456789

是

nonfile

{parameter:nonfile}

不是 BlazorSample.styles.css

，不是 favicon.ico

是

3. 可选参数

@page "/product/{Id:int}"

@page "/product/{Category}/{Id:int}"

@if (string.IsNullOrEmpty(Category))

{

}

else

{

<p>分类: @Category</p>

}

@if (Id > 0)

{

}

@code {

[Parameter]

public string? Category { get; set; }

[Parameter]

public int Id { get; set; }

}

4. 捕获所有路由

@page "/docs/{*path}"

<h1>文档查看器</h1>

<p>请求的路径: @Path</p>

@code {

[Parameter]

public string? Path { get; set; }

}

4、编程式导航

1. 使用 NavigationManager

@page "/navigation"

@inject NavigationManager Navigation

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

}

image (5)

2. 带查询参数的导航

@page "/search"

@inject NavigationManager Navigation

@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}");

}

image (6)

5、高级路由功能

1. 路由事件处理

@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. 多布局系统

@page "/dashboard"

@layout MainLayout

@inherits LayoutComponentBase

</nav>

@Body

</main>

</div>

2. 嵌套路由配置

@page "/admin/*"

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

<nav>

</nav>

</div>

7、完整示例应用

1. 主布局和导航

image (7)

2. 导航菜单

image (8)

3. 用户管理页面

@page "/users"

@page "/users/{Action:string}/{Id:int}"

@if (Action == "edit" && Id > 0)

{

}

else if (Action == "create")

{

}

else

{

}

@code {

[Parameter]

public string? Action { get; set; }

[Parameter]

public int Id { get; set; }

}

<p>用户ID: @UserId</p>

@code {

[Parameter]

public int UserId

{

get; set;

}