Blazor-路由模板（上）

Blazor 的路由模板是定义应用中不同页面或组件访问路径的一种方式。通过路由模板，你可以管理应用程序的导航结构，支持基本路由、参数路由、子路由和区域路由等功能。 我们为访问组件使用@page 指令指定路由 URL

@page "/demoPage"
<h3></h3>
@code {
  
}

如这个页面我们设置了路由为/demoPage，/demoPage 是可以直接访问 DemoPage.razor 组件的.

@attribute 设置路由模板

除了使用@Page来设置路由模板，我们还可以使用@attribute来设置路由模板 组件编译后，实际上是将@page 指令使用RouteAttribute 特性替代的。因此，我们也可以在组件中直接使用 RouteAttribute 特性指定路由模板。 两种方式在性能上是一致的没有区别 使用的方法如下：

@attribute [Route("路由模板")]

下面我们使用@Page和@attribute，以下的两种写法是等效的

@page "/demoPage"
@attribute [Route("/demoPage")]

常量路由模板

@attribute [Route(UrlTemplate)]
<h3>demoPage</h3>
<h2>路由参数：@Id</h2>
@code {
    private const string UrlTemplate = "/demoPage/{id?}";
    [Parameter]
    public string? Id { get; set; }
}

常量的路由需要使用@attribute的形式来声明即可。

路由参数

路由形式

/xxx/{xx?}

我们将路由修改为@page "/demoPage/{id?}" demoPage是路径中的固定字符，{id?}是路由参数，路由参数必须放在{}括号中，带？表示可选参数。 {id?}中的 id 不分区大小写，但会自动与 Id 属性匹配。 在使用路由参数时我们需要有对应的变量接收他，否则会产生报错如下

我们需要一个[Parameter]特性的Id来接收路由参数 如下

@page "/demoPage/{id?}"
<h3>demoPage</h3>
@code {
    [Parameter]
    public string? Id { get; set; }
}

我们这里给Id声明的是string类型，路由可以接收srting类型的参数，string类型可以匹配所有的参数了，以下的路由都可以进行匹配

• /demoPage
• /demoPage/1
• /demoPage/avc
• /demoPage/123-a

路由参数值

在之前的代码中我们已经声明了路由的接收参数Id，我们可以直接取值，看看路由参数是否正确接收 @page “/demoPage/{id?}”

<h3>demoPage</h3>
<h2>路由参数：@Id</h2>
@code {
    [Parameter]
    public string? Id { get; set; }
}

/xxx

不传参数

/xxx/1

参数传1

路由多参数

多参数也比较简单，多个参数接收即可，直接看示例

@page "/demoPage/{name}/{id?}"
<h3>demoPage</h3>
<h2>路由参数Id：@Id</h2>
<h2>路由参数Name：@Name</h2>
@code {
    [Parameter]
    public string? Id { get; set; }

    [Parameter] 
    public string Name { get; set; } = null!;
    
    protected override void OnParametersSet()
    {
        Id ??= "999";
    }
}

参数默认值

可选参数，在访问时没有传入参数值，也可以访问的，其值为 null。可使用默认值替代 null 值，对于给路由参数设置默认值，通过重写 OnParametersSet()方法实现。 OnParametersSet()是在给路由参数赋值后执行的。

@page "/demoPage/{id?}"
<h3>demoPage</h3>
<h2>路由参数：@Id</h2>
@code {
    [Parameter]
    public string? Id { get; set; }

    protected override void OnParametersSet()
    {
        Id ??= "999";
    }
}

我们试试不传参数，能否使用默认值

我们可以看到路由使用了默认值