Blazor获取Url路由参数的方法

这里整理了两种获取参数值的方法： 通过NavigationManager服务获取参数值和配置路由参数获取参数值。

在Blazor Server和WebAssembly中，可以通过注入 NavigationManager服务获取Uri转化为Uri对象得到Query. 然后使用HttpUtility或者QueryHelpers提供的方法获取参数值。

注入NavigationManager服务获取参数值

@code{
	public string? Id { get; set; }
	public string? Url { get; set; }
	
	protected override void OnInitialized()
	{
		
		Url = NavManager.BaseUri;
		// 获取Uri对象
		var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
		// HttpUtility 获取参数值
		Id = HttpUtility.ParseQueryString(uri.Query).Get("id");
		// QueryHelpers 获取参数值
		Id = QueryHelpers.ParseQuery(uri.Query).GetValueOrDefault("id");
		StringValues extraTopping;
		// QueryHelpers TryGetValue获取参数值
		if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("id", out extraTopping))
		{
			Id = System.Convert.ToString(extraTopping);
		}
	}
}

配置路由参数获取参数值

将参数名声明为路由参数

使用 @page 指令指定将作为路由参数传递给组件的 URI 部分。 在组件的代码中，你可以像获取组件参数的值一样获取路由参数的值：

@page "/article/{id}"

使用可选路由参数

这样的话如果没有id参数会找不到路由。如果id可以不传，那么可以使用可选路由参数：

@page "/article/{id?}"

根据微软的建议，为可选参数设置默认值是很好的做法。

为路由参数指定类型

如果需要限制参数的类型，可以为路由参数指定类型：

@page "/article/{id:int?}"
@code {
	[Parameter]
	public int? Int{ get; set; }
}

设置捕获全部路由参数

如果要同时获得几个同名参数的话可以设置捕获全部路由参数

@page "@page "/{*name}""
@code {
	[Parameter]
	public string? Name { get; set; }
}

此时我们传递多个参数 https://localhost:7096/paul/mary/peter

获取的Name值为： paul/mary/peter