Blazor_WASM 4: Routing

route template

The Router component can be used to route to Razor components in Blazor applications. The Router component is used in the Blazor app's Appcomponent . The App component template is as follows

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

At runtime, RouteViewcomponents serve two purposes:

Receive RouteData (eg /test) and all route parameters from Router.
Renders the specified component using its layout, including any subsequent nested layouts.

The component supports multiple @pagedirectives , both /blazor-route and /different-blazor-route can jump to this interface

@page "/blazor-route"
@page "/different-blazor-route"

<h1>Blazor routing</h1>

can also be @pagereplaced with@attribute

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

Important : To correctly parse the URL, it must be <head>included in, that is, included in <base>index.html in wwwroot .<head><base>

<head>
    ...
    <base href="/" />
    ...
</head>

element focus

After switching to the specified page, you can set the UI focus to the specified element.

<FocusOnNavigate RouteData="@routeData" Selector="h1" />

When the Router component navigates to a new page, the FocusOnNavigate component sets focus to the page's top-level header ( <h1>).

NotFound

The Router component allows applications to specify custom content if no content can be found for the requested route

<NotFound>
     <h1>Sorry</h1>
     <p>Sorry, there's nothing at this address.</p>
</NotFound>

routing parameters

The router uses the same route parameter names to populate component parameters, and route parameters are case-insensitive.

@page "/test/{name}"

<h3>Test</h3>

<p>传入的参数是：@Name</p>

@code {
    [Parameter]
    public string? Name{ set;get; }
}

Fill in the address bar/test/哈哈哈

However , if the address bar only writes /test, that is, does not write parameters, it will appear

Rewritten as @page "/test/{name?}", name becomes an optional parameter, and the address bar is still only written /test, it will appear

routing constraints

Routing constraints enforce type matching between routing segments and components, for example only allowing ids to be of type int

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

<h1>User Id: @Id</h1>

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

Routing Constraint Type

Routing constraints can also use optional parameters, such as the following Idare required and optionoptional

@page "/user/{Id:int}/{Option:bool?}"

CatchAll route parameters

If you want to use all the content /test/a/b/cin the middle and /test/back as parameters, you can use /test/{*par}to extract.

@page "/catch-all/{*pageRoute}"

@code {
    [Parameter]
    public string? PageRoute { get; set; }
}

query string

The style of the query string is, for example /test?name=tom&age=18, ？the following content is the query string, and the types supported by the query string are , bool, DateTime, decimal, double, float, Guid, int, long. stringThe method of use is as follows:

@page "/test"

<h3>Test</h3>

<p>姓名：@Name</p>
<p>年龄：@Age</p>
<p>性别：@(MyProperty)</p>

@code {

    [Parameter]
    [SupplyParameterFromQuery]
    public string? Name{ set;get; }

    [Parameter]
    [SupplyParameterFromQuery]
    public int? Age { set; get; }

    [Parameter]
    [SupplyParameterFromQuery]
    public bool Gender { set; get; }

    public string MyProperty
    {
        get { return Gender?"男":"女"; }
    }   
}

Type in the address bar.../test?name=Tom&age=18&gender=true

The Name property of SupplyParameterFromQuery can specify the name of the query parameter. The following is a case of putting the query parameters in the same array:

@page "/test"

<h3>Test</h3>
@foreach (var item in stars)
{
    <p>@item</p>
}

@code {

    [Parameter]
    [SupplyParameterFromQuery(Name ="star")]
    public string[]? stars { set; get; }

}

Type in the address bar.../test?star=a&star=b&star=c