分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-21 23:01:00

今天我们开始详细的从微软的官方文档中半翻译半加入自己的理解顺着将微软Blazor的官方文档学习的经历记录在这一系列的文章里，以供大家学习和参考。

今天我们来讲一下Blazor的基础之一路由：

前面我们说过了Blazor是基于组件来编程的，需要注意的是在Blazor里有两种组件，一种是带有路由功能的组件，另外一种不具备路由功能的组件，要想理解路由组件，我们先需要理解Blazor应用的架构是什么样子的。

我们之前的文章中也有谈到过这个问题，每个Blazor应用都是从Program.cs 主类开始，在该类中的Main方法初始化Host，然后由host引入Blazor应用中的主要组件App.razor, 其中的分别是基于WebAssembly是直接从wwwroot/index.html开始通过blazor框架js, 引入运行时，运行Program.cs然后引入组件app.razor, 如下图：
wwwroot/index.html

而基于Server的是直接在服务器的运行时中运行Program.cs 并通过Startup.cs以及Pages/_Host.cshtml来启动App.razor组件的，如下图：Startup.cs 

Pages/_Host.cshtml:

通过比较无论是基于webassembly还是基于Server, 都已经进入到了根组件App.razor了。 

启动了App.razor组件之后，我们可以看到Blazor应用最为基础的第一个组件就是内置组件Root.razor:

同时让Blazor在Program所在的程序集里扫描所有本Blazor项目中的可路由的组件，注意这里我们使用的属性：AppAssembly, 这个用于路由组件所在的程序集，加入我们还有额外的RCL(Razor Component Library)中也包含由可以路由的组件，需要Blazor框架自动扫描并添加进来，只需要使用属性参数：AdditionalAssemblies， 如下图：

至此我们已经将Blazor的路由参数只好了，那么接下来我们需要看看我们如何编写可路由组件了。

编写可路由组件

编写可路由组件非常简单，要遵守几个原则：

1. 需要将可路由组件至于约定目录：Pages， 例如Pages/TodoList.razor

2. 组件名称的第一个字母必须大写，例如Pages/TodoList.razor

3. 为了在可路由组件里正确的处理URL， 必须在入口文件中指定<base/>(webassembly中wwwroot/index.html,     Server中Pages/_Host.cshtml, 例如

4. 在可路由的组件中非空白的第一行用指令@page "/path" 指定该组件是可路由组件，并指定路径。

5. 可在一个可路由组件中指定多个@page指令以便路由到不同的路径，但是指向同一个页面

路由参数

在指定可路由组件的时候，可以通过如下的形式指定路由参数：
@page "/path/{text}" 

可以指定一个可选的参数：

路由参数限定

我们可以指定路由参数的限制，例如我们只需要一个整数的参数：

下表是Blazor官方指定的支持的路由参数限定：

用户请求URL中包含句点(.)

如果在请求的URL中包含一个句点，那么会当成一个文件来下载，尽量避免这样的URL：

https://localhost.com:5001/example/some.thing

类似这样的URL会被当成一个文件来下载，从而引发404， 尽量避免这种情况。

捕获所有的路由参数

可以采用如下的方式来捕获所有的路由参数：

URL和navigation 帮助类

用户在Blazor中生成URL，以及导航，用法是在组件里通过DI导入类： NavigationManager，如下例：

使用该类来捕获查询字符串：

如下是该类的参考：