ASP.NET Core Blazor routering en navigatie

Artikel
03/26/2025

Notitie

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie de .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

In dit artikel wordt uitgelegd hoe u routering van Blazor app-aanvragen beheert en hoe u het NavLink-onderdeel gebruikt om navigatiekoppelingen te maken.

Belangrijk

Codevoorbeelden in dit artikel bevatten methoden die worden aangeroepen op Navigation. Dit is een geïnjecteerde NavigationManager in klassen en onderdelen.

Statische versus interactieve routering

Deze sectie is van toepassing op Blazor Web Apps.

Als prerendering is ingeschakeld, voert de Blazor router (Router onderdeel, <Router> in Routes.razor) statische routering naar onderdelen uit tijdens statische server-side rendering (statische SSR). Dit type routering wordt statische routeringgenoemd.

Wanneer een interactieve rendermodus wordt toegewezen aan het Routes onderdeel, wordt de Blazor router interactief na statische SSR met statische routering op de server. Dit type routering wordt interactieve routeringgenoemd.

Statische routers gebruiken eindpuntroutering en het HTTP-aanvraagpad om te bepalen welk onderdeel moet worden weergegeven. Wanneer de router interactief wordt, wordt de URL van het document (de URL in de adresbalk van de browser) gebruikt om te bepalen welk onderdeel moet worden weergegeven. Dit betekent dat de interactieve router dynamisch kan wijzigen welk onderdeel wordt weergegeven als de URL van het document dynamisch wordt gewijzigd in een andere geldige interne URL en dit kan zonder een HTTP-aanvraag uit te voeren om nieuwe pagina-inhoud op te halen.

Interactieve routering voorkomt ook prerendering omdat nieuwe pagina-inhoud niet met een normale paginaaanvraag van de server wordt opgevraagd. Zie Prerender ASP.NET Core Razor-onderdelenvoor meer informatie.

Routesjablonen

Het Router onderdeel maakt routering mogelijk voor Razor onderdelen en bevindt zich in het Routes-onderdeel van de app (Components/Routes.razor).

Met het Router-onderdeel kunt u routeren naar Razor onderdelen. Het Router onderdeel wordt gebruikt in het App onderdeel (App.razor).

Wanneer een Razor onderdeel (.razor) met een @page-instructie wordt gecompileerd, wordt de gegenereerde onderdeelklasse een RouteAttribute die de routesjabloon van het onderdeel opgeeft.

Wanneer de app start, wordt de assembly die als router AppAssembly is opgegeven, gescand om de route-informatie te verzamelen voor de componenten van de app die een RouteAttributehebben.

Tijdens uitvoering is de RouteView-component:

Ontvangt de RouteData van de Router samen met eventuele routeparameters.
Geeft de opgegeven component weer met de layout, inclusief eventuele verdere geneste layouts.

Geef desgewenst een DefaultLayout parameter op met een indelingsklasse voor onderdelen die geen indeling opgeven met de @layout instructie. De Blazor projectsjablonen van het framework het MainLayout onderdeel (MainLayout.razor) opgeven als de standaardindeling van de app. Voor meer informatie over indelingen, zie ASP.NET Core Blazor indelingen.

Onderdelen ondersteunen meerdere routesjablonen met behulp van meerdere @page instructies. Het volgende voorbeeldcomponent wordt geladen bij verzoeken voor /blazor-route en /different-blazor-route.

BlazorRoute.razor:

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

<PageTitle>Routing</PageTitle>

<h1>Routing Example</h1>

<p>
    This page is reached at either <code>/blazor-route</code> or 
    <code>/different-blazor-route</code>.
</p>

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

<PageTitle>Routing</PageTitle>

<h1>Routing Example</h1>

<p>
    This page is reached at either <code>/blazor-route</code> or 
    <code>/different-blazor-route</code>.
</p>

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

<h1>Blazor routing</h1>

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

<h1>Blazor routing</h1>

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

<h1>Blazor routing</h1>

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

<h1>Blazor routing</h1>

Belangrijk

De app moet een <base> tag (locatie van <head> inhoud) bevatten met het basispad van de app dat is opgegeven in het kenmerk href om URL's correct op te lossen. Zie Host en implementeer ASP.NET Core Blazorvoor meer informatie.

De Router communiceert niet met queryreekswaarden. Zie de sectie Queryreeksen om met queryreeksen te werken.

Als alternatief voor het opgeven van de routesjabloon als een letterlijke tekenreeks met de @page-instructie, kunnen routesjablonen op basis van constanten worden opgegeven met de @attribute-instructie.

In het volgende voorbeeld wordt de @page-instructie in een onderdeel vervangen door de @attribute-instructie en de routesjabloon op basis van constanten in Constants.CounterRoute, die elders in de app is ingesteld op '/counter':

- @page "/counter"
+ @attribute [Route(Constants.CounterRoute)]

Notitie

Met de release van ASP.NET Core 5.0.1 en voor eventuele extra 5.x-releases bevat het Router onderdeel de PreferExactMatches parameter die is ingesteld op @true. Zie Migreren van ASP.NET Core 3.1 naar 5.0voor meer informatie.

Het FocusOnNavigate-onderdeel stelt de UI-focus in op een element op basis van een CSS-selector nadat u van de ene pagina naar de andere hebt genavigeerd.

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

Wanneer het Router-onderdeel naar een nieuwe pagina navigeert, stelt het FocusOnNavigate onderdeel de focus in op de koptekst op het hoogste niveau van de pagina (<h1>). Dit is een algemene strategie om ervoor te zorgen dat een paginanavigatie wordt aangekondigd wanneer u een schermlezer gebruikt.

Aangepaste inhoud opgeven wanneer inhoud niet wordt gevonden

Met het Router-onderdeel kan de app aangepaste inhoud opgeven als inhoud niet wordt gevonden voor de aangevraagde route.

Stel aangepaste inhoud in voor de NotFound parameter van het Router-onderdeel:

<Router ...>
    ...
    <NotFound>
        ...
    </NotFound>
</Router>

Willekeurige items worden ondersteund als inhoud van de parameter NotFound, zoals andere interactieve onderdelen. Zie ASP.NET Core Blazor indelingenals u een standaardindeling wilt toepassen op NotFound inhoud.

Belangrijk

Blazor Web Appgebruikt de parameter NotFound (<NotFound>...</NotFound> opmaak) niet, maar de parameter wordt ondersteund† voor achterwaartse compatibiliteit om te voorkomen dat wijzigingen in het framework problemen veroorzaken. De serverzijde ASP.NET Core middleware-pijplijn verwerkt aanvragen op de server. Gebruik technieken aan de serverzijde om onjuiste aanvragen af te handelen.

†Ondersteund in deze context betekent dat het plaatsen van <NotFound>...</NotFound> markeringen geen uitzondering oplevert, maar dat het gebruik van de markeringen ook niet effectief is.

Zie ASP.NET Core Blazor rendermodivoor meer informatie, waaronder een aanbevolen aanpak voor het verwerken van ongeldige aanvragen.

Routeren naar onderdelen van meerdere assembly's

Deze sectie is van toepassing op Blazor Web Apps.

Gebruik de AdditionalAssemblies-parameter van het Router-onderdeel en de opbouwfunctie voor eindpuntconventies AddAdditionalAssemblies om routeerbare onderdelen in extra assembly's te detecteren. In de volgende subsecties wordt uitgelegd wanneer en hoe u elke API gebruikt.

Statische routering

Als u routeerbare onderdelen van extra assembly's wilt detecteren voor statische server-side rendering (statische SSR), zelfs als de router later interactief wordt voor interactieve rendering, moeten de assembly's worden bekendgemaakt aan het Blazor framework. Roep de methode AddAdditionalAssemblies aan met de extra assembly's die zijn gekoppeld aan MapRazorComponents in het Program-bestand van het serverproject.

Het volgende voorbeeld bevat de routeerbare onderdelen in de assembly van het BlazorSample.Client project met behulp van het _Imports.razor-bestand van het project:

app.MapRazorComponents<App>()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

Notitie

De voorgaande richtlijnen zijn ook van toepassing in scenario's met componentklassebibliotheek ,. Aanvullende belangrijke richtlijnen voor klassebibliotheken en statische SSR vindt u in ASP.NET Core Razor klassebibliotheken (RCL's) met statische SSR-rendering (statische SSR).

Interactieve routering

Een interactieve rendermodus kan worden toegewezen aan het Routes onderdeel (Routes.razor) waardoor de Blazor router interactief wordt na statische SSR en statische routering op de server. <Routes @rendermode="InteractiveServer" /> bijvoorbeeld interactieve server-side rendering (interactieve SSR) toewijst aan het Routes-onderdeel. Het Router-onderdeel neemt interactieve rendering aan serverzijde (interactieve SSR) over van het Routes-onderdeel. De router wordt interactief na statische routering op de server.

Interne navigatie voor interactieve routering houdt niet in dat nieuwe pagina-inhoud van de server wordt aangevraagd. Daarom vindt het prerendering niet plaats voor interne paginaaanvragen. Zie Prerender ASP.NET Core Razor-onderdelenvoor meer informatie.

Als het Routes onderdeel is gedefinieerd in het serverproject, moet de AdditionalAssemblies parameter van het Router onderdeel de assembly van het .Client project bevatten. Hierdoor kan de router correct werken wanneer deze interactief wordt weergegeven.

In het volgende voorbeeld bevindt het Routes onderdeel zich in het serverproject en het _Imports.razor bestand van het BlazorSample.Client project geeft de assembly aan om te zoeken naar routeerbare onderdelen:

<Router
    AppAssembly="..."
    AdditionalAssemblies="[ typeof(BlazorSample.Client._Imports).Assembly ]">
    ...
</Router>

Aanvullende assemblies worden gescand naast de assembly die voor AppAssemblyis opgegeven.

Notitie

De voorgaande richtlijnen zijn ook van toepassing in onderdeelklassebibliotheek scenario's.

Routeerbare onderdelen bestaan ook alleen in het .Client project waarop globale interactieve webassembly of automatische rendering is toegepast en het Routes onderdeel wordt gedefinieerd in het .Client project, niet in het serverproject. In dit geval zijn er geen externe assembly's met routeerbare onderdelen, dus het is niet nodig om een waarde op te geven voor AdditionalAssemblies.

Deze sectie is van toepassing op Blazor Server apps.

Gebruik de AdditionalAssemblies-parameter van het Router-onderdeel en de opbouwfunctie voor eindpuntconventies AddAdditionalAssemblies om routeerbare onderdelen in extra assembly's te detecteren.

In het volgende voorbeeld is Component1 een routeerbaar onderdeel dat is gedefinieerd in een componentklassebibliotheek met de naam ComponentLibrary:

<Router
    AppAssembly="..."
    AdditionalAssemblies="new[] { typeof(ComponentLibrary.Component1).Assembly }">
    ...
</Router>

Aanvullende assemblies worden gescand, naast de assembly die is gespecificeerd voor AppAssembly.

Routeparameters

De router gebruikt routeparameters om de bijbehorende componentparameters te vullen met dezelfde naam. Namen van routeparameters zijn niet hoofdlettergevoelig. In het volgende voorbeeld wijst de parameter text de waarde van het routesegment toe aan de eigenschap Text van het onderdeel. Wanneer er een aanvraag wordt gedaan voor /route-parameter-1/amazing, wordt de inhoud weergegeven als Blazor is amazing!.

RouteParameter1.razor:

@page "/route-parameter-1/{text}"

<PageTitle>Route Parameter 1</PageTitle>

<h1>Route Parameter Example 1</h1>

<p>Blazor is @Text!</p>

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

@page "/route-parameter-1/{text}"

<PageTitle>Route Parameter 1</PageTitle>

<h1>Route Parameter Example 1</h1>

<p>Blazor is @Text!</p>

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

@page "/route-parameter-1/{text}"

<h1>Blazor is @Text!</h1>

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

@page "/route-parameter-1/{text}"

<h1>Blazor is @Text!</h1>

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

@page "/route-parameter-1/{text}"

<h1>Blazor is @Text!</h1>

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

@page "/route-parameter-1/{text}"

<h1>Blazor is @Text!</h1>

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

Optionele parameters worden ondersteund. In het volgende voorbeeld wijst de text optionele parameter de waarde van het routesegment toe aan de eigenschap Text van het onderdeel. Als het segment niet aanwezig is, wordt de waarde van Text ingesteld op fantastic.

Optionele parameters worden niet ondersteund. In het volgende voorbeeld worden twee @page richtlijnen toegepast. De eerste richtlijn staat navigatie naar het onderdeel zonder parameter toe. De tweede instructie wijst de {text} routeparameterwaarde toe aan de eigenschap Text van het onderdeel.

RouteParameter2.razor:

@page "/route-parameter-2/{text?}"

<PageTitle>Route Parameter 2</PageTitle>

<h1>Route Parameter Example 2</h1>

<p>Blazor is @Text!</p>

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

    protected override void OnParametersSet() => Text = Text ?? "fantastic";
}

@page "/route-parameter-2/{text?}"

<PageTitle>Route Parameter 2</PageTitle>

<h1>Route Parameter Example 2</h1>

<p>Blazor is @Text!</p>

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

    protected override void OnParametersSet() => Text = Text ?? "fantastic";
}

@page "/route-parameter-2/{text?}"

<h1>Blazor is @Text!</h1>

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

    protected override void OnParametersSet()
    {
        Text = Text ?? "fantastic";
    }
}

@page "/route-parameter-2/{text?}"

<h1>Blazor is @Text!</h1>

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

    protected override void OnParametersSet()
    {
        Text = Text ?? "fantastic";
    }
}

@page "/route-parameter-2/{text?}"

<h1>Blazor is @Text!</h1>

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

    protected override void OnParametersSet()
    {
        Text = Text ?? "fantastic";
    }
}

@page "/route-parameter-2"
@page "/route-parameter-2/{text}"

<h1>Blazor is @Text!</h1>

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

    protected override void OnParametersSet()
    {
        Text = Text ?? "fantastic";
    }
}

Wanneer de OnInitialized{Async} levenscyclusmethode wordt gebruikt in plaats van de OnParametersSet{Async} levenscyclusmethode, wordt de standaardtoewijzing van de eigenschap Text aan fantastic niet uitgevoerd als de gebruiker in hetzelfde onderdeel navigeert. Deze situatie ontstaat bijvoorbeeld wanneer de gebruiker van /route-parameter-2/amazing naar /route-parameter-2navigeert. Wanneer de onderdeelinstantie voortduurt en nieuwe parameters accepteert, wordt de methode OnInitialized niet opnieuw aangeroepen.

Notitie

Routeparameters werken niet met queryreekswaarden. Bekijk de sectie Queryreeksen om met queryreeksen te werken.

Routebeperkingen

Een routebeperking dwingt typeovereenkomst af voor een routesegment met een component.

In het volgende voorbeeld komt de route naar het User-onderdeel alleen overeen als:

Er is een Id routesegment aanwezig in de aanvraag-URL.
Het Id segment is een geheel getal (int) type.

User.razor:

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

<PageTitle>User</PageTitle>

<h1>User Example</h1>

<p>User Id: @Id</p>

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

Notitie

Routebeperkingen werken niet met queryreekswaarden. Zie de sectie Queryreeksen om met queryreeksen te werken.

De routebeperkingen die in de volgende tabel worden weergegeven, zijn beschikbaar. Zie de waarschuwing onder de tabel voor meer informatie voor de routebeperkingen die overeenkomen met de invariante cultuur.

Beperking	Voorbeeld	Voorbeeldovereenkomsten	Invariant cultuur bijpassend
`bool`	`{active:bool}`	`true`, `FALSE`	Nee
`datetime`	`{dob:datetime}`	`2016-12-31`, `2016-12-31 7:32pm`	Ja
`decimal`	`{price:decimal}`	`49.99`, `-1,000.01`	Ja
`double`	`{weight:double}`	`1.234`, `-1,001.01e8`	Ja
`float`	`{weight:float}`	`1.234`, `-1,001.01e8`	Ja
`guid`	`{id:guid}`	`00001111-aaaa-2222-bbbb-3333cccc4444`, `{00001111-aaaa-2222-bbbb-3333cccc4444}`	Nee
`int`	`{id:int}`	`123456789`, `-123456789`	Ja
`long`	`{ticks:long}`	`123456789`, `-123456789`	Ja
`nonfile`	`{parameter:nonfile}`	Niet `BlazorSample.styles.css`, niet `favicon.ico`	Ja

Waarschuwing

Routebeperkingen die de URL controleren en worden geconverteerd naar een CLR-type (zoals int of DateTime) gebruiken altijd de invariante cultuur. Bij deze beperkingen wordt ervan uitgegaan dat de URL niet kan worden gelokaliseerd.

Routebeperkingen kunnen ook werken met optionele parameters . In het volgende voorbeeld is Id vereist, maar Option een optionele booleaanse routeparameter is.

User.razor:

@page "/user/{id:int}/{option:bool?}"

<p>
    Id: @Id
</p>

<p>
    Option: @Option
</p>

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

    [Parameter]
    public bool Option { get; set; }
}

Bestandsopname voorkomen in een routeparameter

Met de volgende routesjabloon worden per ongeluk statische assetpaden vastgelegd in de optionele routeparameter (Optional). Het opmaakmodel van de app (.styles.css) wordt bijvoorbeeld vastgelegd, waardoor de stijlen van de app worden verbroken:

@page "/{optional?}"

...

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

Als u een routeparameter wilt beperken tot het vastleggen van paden die geen bestanden zijn, gebruikt u de :nonfile constraint in de routesjabloon:

@page "/{optional:nonfile?}"

Routering met URL's die puntjes bevatten

Bij een aan de serverzijde standaardroutesjabloon wordt ervan uitgegaan dat als het laatste segment van een aanvraag-URL een punt (.) bevat dat een bestand wordt aangevraagd. De relatieve URL /example/some.thing wordt bijvoorbeeld door de router geïnterpreteerd als een aanvraag voor een bestand met de naam some.thing. Zonder extra configuratie retourneert een app een 404- Niet gevonden antwoord als some.thing is bedoeld om te routeren naar een onderdeel met een @page instructie en some.thing een routeparameterwaarde is. Als u een route wilt gebruiken met een of meer parameters die een punt bevatten, moet de app de route configureren met een aangepaste sjabloon.

Houd rekening met het volgende Example onderdeel dat een routeparameter kan ontvangen van het laatste segment van de URL.

Example.razor:

@page "/example/{param?}"

<p>
    Param: @Param
</p>

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

@page "/example/{param?}"

<p>
    Param: @Param
</p>

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

@page "/example/{param?}"

<p>
    Param: @Param
</p>

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

@page "/example"
@page "/example/{param}"

<p>
    Param: @Param
</p>

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

Als u de Server-app van een gehoste oplossing van Blazor WebAssemblywilt toestaan dat de aanvraag routeert met een punt in de param-routeparameter, voegt u een terugvalroutesjabloon toe met de optionele parameter in het Program-bestand.

app.MapFallbackToFile("/example/{param?}", "index.html");

Als u een Blazor Server-app wilt configureren om de aanvraag te routeren met een punt in de param routeparameter, voegt u een routesjabloon voor de terugvalpagina toe met de optionele parameter in het bestand Program:

app.MapFallbackToPage("/example/{param?}", "/_Host");

Zie Routering in ASP.NET Corevoor meer informatie.

Als u wilt toestaan dat de Server-app van een gehoste Blazor WebAssembly-oplossing een aanvraag met een punt in de routeparameter param routeert, voegt u een terugvalroutesjabloon toe die de optionele parameter in Startup.Configurebevat.

Startup.cs:

endpoints.MapFallbackToFile("/example/{param?}", "index.html");

Startup.cs:

endpoints.MapFallbackToPage("/example/{param?}", "/_Host");

Zie Routering in ASP.NET Corevoor meer informatie.

Parameters voor een uitgebreide route

Catch-all routeparameters, die paden over meerdere mapgrenzen vastleggen, worden ondersteund in onderdelen.

Algemene routeparameters zijn:

De naam komt overeen met de naam van het routesegment. Naamgeving is niet hoofdlettergevoelig.
Een string type. Het framework biedt geen automatische casting.
Aan het einde van de URL.

CatchAll.razor:

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

<PageTitle>Catch All</PageTitle>

<h1>Catch All Parameters Example</h1>

<p>Add some URI segments to the route and request the page again.</p>

<p>
    PageRoute: @PageRoute
</p>

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

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

<PageTitle>Catch All</PageTitle>

<h1>Catch All Parameters Example</h1>

<p>Add some URI segments to the route and request the page again.</p>

<p>
    PageRoute: @PageRoute
</p>

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

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

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

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

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

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

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

Voor de URL-/catch-all/this/is/a/test met een routesjabloon van /catch-all/{*pageRoute}is de waarde van PageRoute ingesteld op this/is/a/test.

Slashes en segmenten van het vastgelegde pad worden gedecodeerd. Voor een routesjabloon van /catch-all/{*pageRoute}levert de URL /catch-all/this/is/a%2Ftest%2Athis/is/a/test*.

Gebruik NavigationManager om URI's en navigatie in C#-code te beheren. NavigationManager bevat de gebeurtenis en methoden die worden weergegeven in de volgende tabel.

Lid	Beschrijving
Uri	Hiermee haalt u de huidige absolute URI op.
BaseUri	Haalt de basis-URI (met een afsluitende slash) op die kan worden voorafgegaan aan relatieve URI-paden om een absolute URI te maken. Normaal gesproken komt BaseUri overeen met het `href` kenmerk op het `<base>`-element van het document (locatie van `<head>`-inhoud).
NavigateTo	Hiermee gaat u naar de opgegeven URI. Als `forceLoad` gelijk is aan `false`: Er is verbeterde navigatie beschikbaar op de huidige URL en de verbeterde navigatie van Blazoris geactiveerd. Anders laadt Blazor de volledige pagina opnieuw in voor de aangevraagde URL. Als `forceLoad` gelijk aan `true`: Routering aan de clientzijde wordt overgeslagen. De browser wordt gedwongen om de nieuwe pagina van de server te laden, ongeacht of de URI normaal gesproken wordt verwerkt door de interactieve router aan de clientzijde. Zie de sectie Verbeterde navigatie en formulierafhandeling voor meer informatie. Als `replace` is `true`, wordt de huidige URI in de browsergeschiedenis vervangen in plaats van een nieuwe URI naar de geschiedenisstack te pushen.
LocationChanged	Een gebeurtenis die wordt geactiveerd wanneer de navigatielocatie is gewijzigd. Zie de sectie Locatiewijzigingen voor meer informatie.
ToAbsoluteUri	Converteert een relatieve URI naar een absolute URI.
ToBaseRelativePath	Op basis van de basis-URI van de app wordt een absolute URI omgezet naar een URI die relatief is aan het basis-URI-voorvoegsel. Zie voor een voorbeeld de sectie Een URI opstellen in relatie tot het basis-URI-voorvoegsel.
`RegisterLocationChangingHandler`	Registreert een handler voor het verwerken van binnenkomende navigatie-gebeurtenissen. Het aanroepen van NavigateTo roept altijd de handler aan.
GetUriWithQueryParameter	Hiermee wordt een URI geretourneerd die is samengesteld door NavigationManager.Uri bij te werken met één parameter die is toegevoegd, bijgewerkt of verwijderd. Zie de sectie Querystrings voor meer informatie.

Lid	Beschrijving
Uri	Hiermee haalt u de huidige absolute URI op.
BaseUri	Haalt de basis-URI (met een afsluitende slash) op die aan relatieve URI-paden kan worden toegevoegd om een absolute URI te vormen. Normaal gesproken komt BaseUri overeen met het `href` kenmerk van het `<base>` element van het document (locatie vanvan `<head>` inhoud).
NavigateTo	Hiermee gaat u naar de opgegeven URI. Als `forceLoad` is `true`: Routering aan de clientzijde wordt overgeslagen. De browser wordt gedwongen om de nieuwe pagina van de server te laden, ongeacht of de URI normaal gesproken wordt verwerkt door de router aan de clientzijde. Als `replace` is `true`, wordt de huidige URI in de browsergeschiedenis vervangen in plaats van een nieuwe URI naar de geschiedenisstack te pushen.
LocationChanged	Een gebeurtenis die wordt geactiveerd wanneer de navigatielocatie is gewijzigd. Zie de sectie Locatiewijzigingen voor meer informatie.
ToAbsoluteUri	Converteert een relatieve URI naar een absolute URI.
ToBaseRelativePath	Op grond van de hoofd-URI van de app wordt een absolute URI omgezet naar een URI relatief aan het basis-URI-prefix. Voor een voorbeeld, zie de sectie Een URI produceren relatief aan het basis-URI-voorvoegsel.
`RegisterLocationChangingHandler`	Registreert een handler voor het verwerken van binnenkomende navigatie-gebeurtenissen. Het aanroepen van NavigateTo roept altijd de handler aan.
GetUriWithQueryParameter	Hiermee wordt een URI geretourneerd die is samengesteld door NavigationManager.Uri bij te werken met één parameter die is toegevoegd, bijgewerkt of verwijderd. Raadpleeg de sectie Queryreeksen voor meer informatie.

Lid	Beschrijving
Uri	Hiermee haalt u de huidige absolute URI op.
BaseUri	Haalt de basis-URI (met een afsluitende slash) op die kan worden toegevoegd aan relatieve URI-paden om een absolute URI te vormen. Normaal gesproken komt BaseUri overeen met het attribuut `href` van het documentelement `<base>` (locatie van `<head>` inhoud).
NavigateTo	Hiermee gaat u naar de opgegeven URI. Als `forceLoad` gelijk is aan `true`: Routering aan de clientzijde wordt overgeslagen. De browser wordt gedwongen om de nieuwe pagina van de server te laden, ongeacht of de URI normaal gesproken wordt verwerkt door de router aan de clientzijde. Als `replace` is `true`, wordt de huidige URI in de browsergeschiedenis vervangen in plaats van een nieuwe URI naar de geschiedenisstack te pushen.
LocationChanged	Een gebeurtenis die wordt geactiveerd wanneer de navigatielocatie is gewijzigd. Zie de sectie Locatiewijzigingen voor meer informatie.
ToAbsoluteUri	Converteert een relatieve URI naar een absolute URI.
ToBaseRelativePath	Op basis van de basis-URI van de app wordt een absolute URI omgezet naar een URI die relatief is aan het basis-URI-voorvoegsel. Zie voor een voorbeeld de Een URI produceren ten opzichte van het basis-URI-voorvoegsel sectie.
GetUriWithQueryParameter	Hiermee wordt een URI geretourneerd die is samengesteld door NavigationManager.Uri bij te werken met één parameter die is toegevoegd, bijgewerkt of verwijderd. Voor meer informatie, zie de sectie querystring.

Lid	Beschrijving
Uri	Hiermee haalt u de huidige absolute URI op.
BaseUri	Haalt de basis-URI (met een afsluitende slash) op die kan worden toegevoegd aan relatieve URI-paden om tot een absolute URI te vormen. Normaal gesproken komt BaseUri overeen met het kenmerk `href` van het documentelement `<base>` (locatie van `<head>` inhoud).
NavigateTo	Hiermee gaat u naar de opgegeven URI. Als `forceLoad` is `true`: Routering aan de clientzijde wordt overgeslagen. De browser wordt gedwongen om de nieuwe pagina van de server te laden, ongeacht of de URI normaal gesproken wordt verwerkt door de router aan de clientzijde.
LocationChanged	Een gebeurtenis die wordt geactiveerd wanneer de navigatielocatie is gewijzigd.
ToAbsoluteUri	Converteert een relatieve URI naar een absolute URI.
ToBaseRelativePath	Op basis van de basis-URI van de app wordt een absolute URI omgezet naar een URI relatief aan het basis-URI-voorvoegsel. Zie voor een voorbeeld de sectie Een URI produceren ten opzichte van het basis-URI-voorvoegsel.

Locatiewijzigingen

Voor de LocationChanged gebeurtenis bevat LocationChangedEventArgs de volgende informatie over navigatie-gebeurtenissen:

Location: de URL van de nieuwe locatie.
IsNavigationIntercepted: Als true, Blazor de navigatie vanuit de browser onderschept. Als falseen NavigationManager.NavigateTo de navigatie hebben veroorzaakt.

Het volgende onderdeel:

Hiermee gaat u naar het Counter-onderdeel van de app (Counter.razor) wanneer de knop is geselecteerd met NavigateTo.
Hiermee wordt de gewijzigde locatie-gebeurtenis verwerkt door u te abonneren op NavigationManager.LocationChanged.
- De HandleLocationChanged methode wordt losgekoppeld wanneer Dispose door het framework wordt aangeroepen. Door de methode los te koppelen, kan het onderdeel worden verzameld door garbage collection.
- De implementatie van de logboekregistratie registreert de volgende informatie wanneer de knop is geselecteerd:
  
  BlazorSample.Pages.Navigate: Information: URL of new location: https://localhost:{PORT}/counter

Navigate.razor:

@page "/navigate"
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<PageTitle>Navigate</PageTitle>

<h1>Navigate Example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent() => Navigation.NavigateTo("counter");

    protected override void OnInitialized() => 
        Navigation.LocationChanged += HandleLocationChanged;

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e) => 
        Logger.LogInformation("URL of new location: {Location}", e.Location);

    public void Dispose() => Navigation.LocationChanged -= HandleLocationChanged;
}

@page "/navigate"
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<PageTitle>Navigate</PageTitle>

<h1>Navigate Example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent() => Navigation.NavigateTo("counter");

    protected override void OnInitialized() => 
        Navigation.LocationChanged += HandleLocationChanged;

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e) => 
        Logger.LogInformation("URL of new location: {Location}", e.Location);

    public void Dispose() => Navigation.LocationChanged -= HandleLocationChanged;
}

@page "/navigate"
@using Microsoft.Extensions.Logging 
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<h1>Navigate in component code example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent()
    {
        Navigation.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        Navigation.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL of new location: {Location}", e.Location);
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= HandleLocationChanged;
    }
}

@page "/navigate"
@using Microsoft.Extensions.Logging 
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<h1>Navigate in component code example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent()
    {
        Navigation.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        Navigation.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL of new location: {Location}", e.Location);
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= HandleLocationChanged;
    }
}

@page "/navigate"
@using Microsoft.Extensions.Logging 
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<h1>Navigate in component code example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent()
    {
        Navigation.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        Navigation.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL of new location: {Location}", e.Location);
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= HandleLocationChanged;
    }
}

@page "/navigate"
@using Microsoft.Extensions.Logging 
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<h1>Navigate in component code example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent()
    {
        Navigation.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        Navigation.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL of new location: {Location}", e.Location);
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= HandleLocationChanged;
    }
}

Zie ASP.NET Core Razor levenscyclus van onderdelenvoor meer informatie over de verwijdering van onderdelen.

Deze sectie is van toepassing op Blazor Web Apps.

Blazor Web Appzijn geschikt voor twee typen routering voor paginanavigatie- en formulierafhandelingsaanvragen:

Normale navigatie (navigatie tussen documenten): er wordt een volledige pagina opnieuw laden geactiveerd voor de aanvraag-URL.
Verbeterde navigatie (navigatie in hetzelfde document): Blazor de aanvraag onderschept en in plaats daarvan een fetch aanvraag uitvoert. Blazor patcht vervolgens de inhoud van het antwoord in de DOM van de pagina. De verbeterde navigatie- en formulierafhandeling van Blazorvoorkomt dat een volledige pagina opnieuw geladen moet worden en zorgt ervoor dat de paginastatus beter behouden blijft, zodat de pagina's sneller laden, meestal zonder dat de scrollpositie van de gebruiker op de pagina verloren gaat.

Verbeterde navigatie is beschikbaar wanneer:

Het Blazor Web App script (blazor.web.js) wordt gebruikt, niet het Blazor Server script (blazor.server.js) of Blazor WebAssembly script (blazor.webassembly.js).
De functie is niet expliciet uitgeschakeld.
De doel-URL bevindt zich binnen de interne basis-URI-ruimte (het basispad van de app).

Als routering aan de serverzijde en verbeterde navigatie zijn ingeschakeld, worden locatie wijzigende handlers alleen aangeroepen voor programmatische navigatie die is gestart vanuit een interactieve runtime. In toekomstige releases kunnen ook aanvullende typen navigatie, zoals het volgen van een koppeling, locatie wijzigende handlers aanroepen.

Wanneer er een verbeterde navigatie plaatsvindt, worden LocationChanged gebeurtenis-handlers geregistreerd bij Interactive Server en WebAssembly-runtimes doorgaans aangeroepen. Er zijn gevallen waarin het wijzigen van de locatie van handlers een verbeterde navigatie mogelijk niet onderschept. De gebruiker kan bijvoorbeeld overschakelen naar een andere pagina voordat een interactieve runtime beschikbaar wordt. Daarom is het belangrijk dat app-logica niet afhankelijk is van het aanroepen van een handler voor het wijzigen van een locatie, omdat er geen garantie is voor de handler die wordt uitgevoerd.

Bij het aanroepen van NavigateTo:

Als forceLoadfalseis, is dit de standaardinstelling:
- En de verbeterde navigatie is beschikbaar op de huidige URL, en de verbeterde navigatie van Blazoris geactiveerd.
- Anders laadt Blazor de volledige pagina opnieuw voor de aangevraagde URL.
Als forceLoad is true: Blazor voert een volledige pagina opnieuw laden uit voor de aangevraagde URL, ongeacht of uitgebreide navigatie beschikbaar is of niet.

U kunt de huidige pagina vernieuwen door NavigationManager.Refresh(bool forceLoad = false)aan te roepen, die altijd een verbeterde navigatie uitvoert, indien beschikbaar. Als verbeterde navigatie niet beschikbaar is, laadt Blazor een volledige pagina opnieuw.

Navigation.Refresh();

Geef true door aan de parameter forceLoad om ervoor te zorgen dat een volledige pagina opnieuw laden altijd wordt uitgevoerd, zelfs als uitgebreide navigatie beschikbaar is:

Navigation.Refresh(true);

Verbeterde navigatie is standaard ingeschakeld, maar kan hiërarchisch en per koppeling worden beheerd met behulp van het data-enhance-nav HTML-kenmerk.

In de volgende voorbeelden wordt verbeterde navigatie uitgeschakeld:

<a href="redirect" data-enhance-nav="false">
    GET without enhanced navigation
</a>

<ul data-enhance-nav="false">
    <li>
        <a href="redirect">GET without enhanced navigation</a>
    </li>
    <li>
        <a href="redirect-2">GET without enhanced navigation</a>
    </li>
</ul>

Als het doel een niet-Blazor eindpunt is, is verbeterde navigatie niet van toepassing en herlaadt de client-side JavaScript de pagina volledig. Dit zorgt ervoor dat er geen verwarring ontstaat over het framework over externe pagina's die niet in een bestaande pagina moeten worden gepatcht.

Als u verbeterde formulierafhandeling wilt inschakelen, voegt u de parameter Enhance toe aan EditForm formulieren of het kenmerk data-enhance aan HTML-formulieren (<form>):

<EditForm ... Enhance ...>
    ...
</EditForm>

<form ... data-enhance ...>
    ...
</form>

Verbeterde formulierafhandeling is niet hiërarchisch en wordt niet doorgegeven aan onderliggende formulieren.

Niet ondersteund: U kunt geen uitgebreide navigatie instellen op het bovenliggende element van een formulier om verbeterde navigatie voor het formulier mogelijk te maken.

<div ... data-enhance ...>
    <form ...>
        <!-- NOT enhanced -->
    </form>
</div>

Verbeterde formulierposten werken uitsluitend met Blazor-eindpunten. Het plaatsen van een verbeterd formulier op een niet-Blazor eindpunt resulteert in een fout.

Verbeterde navigatie uitschakelen:

Voor een EditFormverwijdert u de parameter Enhance uit het formulierelement (of stelt u deze in op false: Enhance="false").
Voor een HTML-<form>verwijdert u het kenmerk data-enhance uit het formulierelement (of stelt u het in op false: data-enhance="false").

Blazorverbeterde navigatie en het doorgeven van formulieren kan dynamische wijzigingen in de DOM ongedaan maken als de bijgewerkte inhoud geen deel uitmaakt van de serverweergave. Als u de inhoud van een element wilt behouden, gebruikt u het kenmerk data-permanent.

In het volgende voorbeeld wordt de inhoud van het element <div> dynamisch bijgewerkt door een script wanneer de pagina wordt geladen:

<div data-permanent>
    ...
</div>

Zodra Blazor op de client is gestart, kunt u de enhancedload gebeurtenis gebruiken om te luisteren naar verbeterde pagina-updates. Hierdoor kunnen wijzigingen opnieuw worden toegepast op de DOM die mogelijk ongedaan zijn gemaakt door een verbeterde pagina-update.

Blazor.addEventListener('enhancedload', () => console.log('Enhanced update!'));

Zie ASP.NET Core Blazor startupom verbeterde navigatie- en formulierafhandeling wereldwijd uit te schakelen.

Verbeterde navigatie met statische server-side rendering (statische SSR) vereist speciale aandacht bij het laden van JavaScript. Voor meer informatie, zie ASP.NET Core Blazor JavaScript met statische server-side rendering (SSR).

Een URI produceren ten opzichte van het basis-URI-voorvoegsel

Op basis van de basis-URI van de app converteert ToBaseRelativePath een absolute URI naar een URI ten opzichte van het basis-URI-voorvoegsel.

Bekijk het volgende voorbeeld:

try
{
    baseRelativePath = Navigation.ToBaseRelativePath(inputURI);
}
catch (ArgumentException ex)
{
    ...
}

Als de basis-URI van de app is https://localhost:8000, worden de volgende resultaten verkregen:

Het doorgeven van https://localhost:8000/segment in inputURI resulteert in een baseRelativePath van segment.
Het doorgeven van https://localhost:8000/segment1/segment2 in inputURI resulteert in een baseRelativePath van segment1/segment2.

Als de basis-URI van de app niet overeenkomt met de basis-URI van inputURI, wordt er een ArgumentException gegenereerd.

Het doorgeven van https://localhost:8001/segment in inputURI resulteert in de volgende uitzondering:

System.ArgumentException: 'The URI 'https://localhost:8001/segment' is not contained by the base URI 'https://localhost:8000/'.'

De NavigationManager gebruikt de Geschiedenis-API van de browser om de status van de navigatiegeschiedenis te behouden die is gekoppeld aan elke locatiewijziging die door de app is aangebracht. Het onderhouden van de geschiedenisstatus is met name handig in scenario's voor externe omleiding, zoals wanneer gebruikers verifiëren met externe id-providers. Zie de sectie Navigatieopties voor meer informatie.

Geef NavigationOptions door aan NavigateTo om het volgende gedrag te beheren:

ForceLoad: routering aan clientzijde overslaan en afdwingen dat de browser de nieuwe pagina van de server laadt, ongeacht of de URI wordt verwerkt door de router aan de clientzijde. De standaardwaarde is false.
ReplaceHistoryEntry: Vervang het huidige item in de geschiedenisstapel. Als falsevoegt u de nieuwe vermelding toe aan de geschiedenisstapel. De standaardwaarde is false.
HistoryEntryState: hiermee haalt u de status op of stelt u deze in om toe te voegen aan de geschiedenisvermelding.

Navigation.NavigateTo("/path", new NavigationOptions
{
    HistoryEntryState = "Navigation state"
});

Zie de sectie Locatiewijzigingen verwerken/voorkomen voor meer informatie over het verkrijgen van de status die is gekoppeld aan de doelgeschiedenisvermelding.

Query-strings

Gebruik het kenmerk [SupplyParameterFromQuery] om op te geven dat een onderdeelparameter afkomstig is van de querytekenreeks.

Gebruik het kenmerk [SupplyParameterFromQuery] met het [Parameter] kenmerk om op te geven dat een onderdeelparameter van een routeerbare onderdeel afkomstig is van de querytekenreeks.

Notitie

Onderdeelparameters kunnen alleen queryparameterwaarden ontvangen in routeerbare onderdelen met een @page-instructie.

Alleen routeerbare onderdelen ontvangen rechtstreeks queryparameters om te voorkomen dat de gegevensstroom van boven naar beneden wordt omgedraaid en om de volgorde van parameterverwerking duidelijk te maken, zowel door het framework als door de app. Dit ontwerp voorkomt subtiele fouten in app-code die is geschreven, uitgaande van een specifieke order voor het verwerken van parameters. U kunt aangepaste trapsgewijze parameters definiëren of rechtstreeks toewijzen aan normale onderdeelparameters om queryparameterwaarden door te geven aan niet-routeerbare onderdelen.

Onderdeelparameters die zijn opgegeven uit de queryreeks ondersteunen de volgende typen:

bool, DateTime, decimal, double, float, Guid, int, long, string.
Null-varianten van de voorgaande typen.
Matrices van de voorgaande typen, ongeacht of ze nullable of niet nullable zijn.

De juiste cultuur-invariante opmaak wordt toegepast voor het opgegeven type (CultureInfo.InvariantCulture).

Specificeer de Name-eigenschap van het [SupplyParameterFromQuery] kenmerk om een andere naam voor de queryparameter te gebruiken dan de parameternaam van het onderdeel. In het volgende voorbeeld wordt de C#-naam van de onderdeelparameter {COMPONENT PARAMETER NAME}. Er wordt een andere naam voor de queryparameter opgegeven voor de tijdelijke aanduiding {QUERY PARAMETER NAME}:

In tegenstelling tot eigenschappen van onderdeelparameter ([Parameter]), kunnen [SupplyParameterFromQuery] eigenschappen naast publicworden gemarkeerd als private.

[SupplyParameterFromQuery(Name = "{QUERY PARAMETER NAME}")]
private string? {COMPONENT PARAMETER NAME} { get; set; }

Net zoals bij eigenschappen van onderdeelparameter ([Parameter]), zijn [SupplyParameterFromQuery] eigenschappen altijd public eigenschappen in .NET 6/7. In .NET 8 of hoger kunnen [SupplyParameterFromQuery] eigenschappen worden gemarkeerd als public of private.

[Parameter]
[SupplyParameterFromQuery(Name = "{QUERY PARAMETER NAME}")]
public string? {COMPONENT PARAMETER NAME} { get; set; }

In het volgende voorbeeld met een URL van /search?filter=scifi%20stars&page=3&star=LeVar%20Burton&star=Gary%20Oldman:

De eigenschap Filter wordt omgezet in scifi stars.
De eigenschap Page wordt omgezet in 3.
De Stars matrix wordt gevuld met queryparameters met de naam star (Name = "star") en wordt omgezet in LeVar Burton en Gary Oldman.

Notitie

De queryreeksparameters in het volgende routeerbare paginaonderdeel werken ook in een niet-routeerbare onderdeel zonder een @page instructie (bijvoorbeeld Search.razor voor een gedeeld Search onderdeel dat in andere onderdelen wordt gebruikt).

Search.razor:

@page "/search"

<h1>Search Example</h1>

<p>Filter: @Filter</p>

<p>Page: @Page</p>

@if (Stars is not null)
{
    <p>Stars:</p>

    <ul>
        @foreach (var name in Stars)
        {
            <li>@name</li>
        }
    </ul>
}

@code {
    [SupplyParameterFromQuery]
    private string? Filter { get; set; }

    [SupplyParameterFromQuery]
    private int? Page { get; set; }

    [SupplyParameterFromQuery(Name = "star")]
    private string[]? Stars { get; set; }
}

Search.razor:

@page "/search"

<h1>Search Example</h1>

<p>Filter: @Filter</p>

<p>Page: @Page</p>

@if (Stars is not null)
{
    <p>Stars:</p>

    <ul>
        @foreach (var name in Stars)
        {
            <li>@name</li>
        }
    </ul>
}

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

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

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

Gebruik GetUriWithQueryParameter om een of meer queryparameters toe te voegen, te wijzigen of te verwijderen op de huidige URL:

@inject NavigationManager Navigation

...

Navigation.GetUriWithQueryParameter("{NAME}", {VALUE})

Voor het voorgaande voorbeeld:

De tijdelijke aanduiding {NAME} geeft de naam van de queryparameter op. De tijdelijke aanduiding {VALUE} geeft de waarde op als ondersteund type. Ondersteunde typen worden verderop in deze sectie vermeld.
Er wordt een tekenreeks geretourneerd die gelijk is aan de huidige URL met één parameter:
- Toegevoegd als de naam van de queryparameter niet bestaat in de huidige URL.
- Bijgewerkt naar de opgegeven waarde als de queryparameter bestaat in de huidige URL.
- Verwijderd als het type van de opgegeven waarde null-waarde is en de waarde is null.
De juiste cultuur-invariante opmaak wordt toegepast voor het opgegeven type (CultureInfo.InvariantCulture).
De naam en waarde van de queryparameter zijn gecodeerd met url's.
Alle waarden met de overeenkomende naam van de queryparameter worden vervangen als er meerdere exemplaren van het type zijn.

Roep GetUriWithQueryParameters aan om een URI te maken die is samengesteld op basis van Uri met meerdere parameters die zijn toegevoegd, bijgewerkt of verwijderd. Voor elke waarde gebruikt het framework value?.GetType() om het runtimetype voor elke queryparameter te bepalen en de juiste cultuur-invariante opmaak te selecteren. Het framework genereert een fout voor niet-ondersteunde typen.

@inject NavigationManager Navigation

...

Navigation.GetUriWithQueryParameters({PARAMETERS})

De tijdelijke aanduiding {PARAMETERS} is een IReadOnlyDictionary<string, object>.

Geef een URI-tekenreeks door aan GetUriWithQueryParameters om een nieuwe URI te genereren op basis van een OPGEGEVEN URI met meerdere parameters die zijn toegevoegd, bijgewerkt of verwijderd. Voor elke waarde gebruikt het framework value?.GetType() om het runtimetype voor elke queryparameter te bepalen en de juiste cultuur-invariante opmaak te selecteren. Het framework genereert een fout voor niet-ondersteunde typen. Ondersteunde typen worden verderop in deze sectie vermeld.

@inject NavigationManager Navigation

...

Navigation.GetUriWithQueryParameters("{URI}", {PARAMETERS})

De placeholder {URI} is de URI met of zonder een querystring.
De tijdelijke aanduiding {PARAMETERS} is een IReadOnlyDictionary<string, object>.

Ondersteunde typen zijn identiek aan ondersteunde typen voor routebeperkingen:

bool
DateTime
decimal
double
float
Guid
int
long
string

Ondersteunde typen zijn onder andere:

Varianten die null-waarden kunnen bevatten van de voorgaande typen.
Arrays van de voorgaande typen, ongeacht of ze nullbaar zijn of niet.

Waarschuwing

Met compressie, die standaard is ingeschakeld, vermijdt u het maken van beveiligde (geverifieerde/geautoriseerde) interactieve serveronderdelen die gegevens uit niet-vertrouwde bronnen weergeven. Niet-vertrouwde bronnen omvatten routeparameters, queryreeksen, gegevens uit JS interop en andere gegevensbronnen die een externe gebruiker kan beheren (databases, externe services). Zie ASP.NET Core BlazorSignalR guidance and Threat mitigation guidance for ASP.NET Core Blazor interactive server side renderingvoor meer informatie.

Een queryparameterwaarde vervangen wanneer de parameter bestaat

Navigation.GetUriWithQueryParameter("full name", "Morena Baccarin")

Huidige URL	Gegenereerde URL
`scheme://host/?full%20name=David%20Krumholtz&age=42`	`scheme://host/?full%20name=Morena%20Baccarin&age=42`
`scheme://host/?fUlL%20nAmE=David%20Krumholtz&AgE=42`	`scheme://host/?full%20name=Morena%20Baccarin&AgE=42`
`scheme://host/?full%20name=Jewel%20Staite&age=42&full%20name=Summer%20Glau`	`scheme://host/?full%20name=Morena%20Baccarin&age=42&full%20name=Morena%20Baccarin`
`scheme://host/?full%20name=&age=42`	`scheme://host/?full%20name=Morena%20Baccarin&age=42`
`scheme://host/?full%20name=`	`scheme://host/?full%20name=Morena%20Baccarin`

Een queryparameter en -waarde toevoegen wanneer de parameter niet bestaat

Navigation.GetUriWithQueryParameter("name", "Morena Baccarin")

Huidige URL	Gegenereerde URL
`scheme://host/?age=42`	`scheme://host/?age=42&name=Morena%20Baccarin`
`scheme://host/`	`scheme://host/?name=Morena%20Baccarin`
`scheme://host/?`	`scheme://host/?name=Morena%20Baccarin`

Een queryparameter verwijderen wanneer de parameterwaarde is `null`

Navigation.GetUriWithQueryParameter("full name", (string)null)

Huidige URL	Gegenereerde URL
`scheme://host/?full%20name=David%20Krumholtz&age=42`	`scheme://host/?age=42`
`scheme://host/?full%20name=Sally%20Smith&age=42&full%20name=Summer%20Glau`	`scheme://host/?age=42`
`scheme://host/?full%20name=Sally%20Smith&age=42&FuLl%20NaMe=Summer%20Glau`	`scheme://host/?age=42`
`scheme://host/?full%20name=&age=42`	`scheme://host/?age=42`
`scheme://host/?full%20name=`	`scheme://host/`

Queryparameters toevoegen, bijwerken en verwijderen

In het volgende voorbeeld:

name wordt verwijderd, indien aanwezig.
age wordt toegevoegd met een waarde van 25 (int), indien niet aanwezig. Indien aanwezig, wordt age bijgewerkt naar een waarde van 25.
eye color wordt toegevoegd of bijgewerkt naar een waarde van green.

Navigation.GetUriWithQueryParameters(
    new Dictionary<string, object?>
    {
        ["name"] = null,
        ["age"] = (int?)25,
        ["eye color"] = "green"
    })

Huidige URL	Gegenereerde URL
`scheme://host/?name=David%20Krumholtz&age=42`	`scheme://host/?age=25&eye%20color=green`
`scheme://host/?NaMe=David%20Krumholtz&AgE=42`	`scheme://host/?age=25&eye%20color=green`
`scheme://host/?name=David%20Krumholtz&age=42&keepme=true`	`scheme://host/?age=25&keepme=true&eye%20color=green`
`scheme://host/?age=42&eye%20color=87`	`scheme://host/?age=25&eye%20color=green`
`scheme://host/?`	`scheme://host/?age=25&eye%20color=green`
`scheme://host/`	`scheme://host/?age=25&eye%20color=green`

Ondersteuning voor opsommingsbare waarden

In het volgende voorbeeld:

full name wordt toegevoegd of bijgewerkt naar Morena Baccarin, één waarde.
ping parameters worden toegevoegd of vervangen door 35, 16, 87 en 240.

Navigation.GetUriWithQueryParameters(
    new Dictionary<string, object?>
    {
        ["full name"] = "Morena Baccarin",
        ["ping"] = new int?[] { 35, 16, null, 87, 240 }
    })

Huidige URL	Gegenereerde URL
`scheme://host/?full%20name=David%20Krumholtz&ping=8&ping=300`	`scheme://host/?full%20name=Morena%20Baccarin&ping=35&ping=16&ping=87&ping=240`
`scheme://host/?ping=8&full%20name=David%20Krumholtz&ping=300`	`scheme://host/?ping=35&full%20name=Morena%20Baccarin&ping=16&ping=87&ping=240`
`scheme://host/?ping=8&ping=300&ping=50&ping=68&ping=42`	`scheme://host/?ping=35&ping=16&ping=87&ping=240&full%20name=Morena%20Baccarin`

Navigeren met een toegevoegde of gewijzigde queryreeks

Als u wilt navigeren met een toegevoegde of gewijzigde querytekenreeks, geeft u een gegenereerde URL door aan NavigateTo.

In het volgende voorbeeld worden oproepen gedaan.

GetUriWithQueryParameter om de name queryparameter toe te voegen of te vervangen met behulp van een waarde van Morena Baccarin.
Roept NavigateTo aan om navigatie naar de nieuwe URL te activeren.

Navigation.NavigateTo(
    Navigation.GetUriWithQueryParameter("name", "Morena Baccarin"));

De querytekenreeks van een aanvraag wordt verkregen uit de eigenschap NavigationManager.Uri:

@inject NavigationManager Navigation

...

var query = new Uri(Navigation.Uri).Query;

Als u de parameters van een queryreeks wilt parseren, moet u URLSearchParams gebruiken met JavaScript (JS) interop:

export createQueryString = (string queryString) => new URLSearchParams(queryString);

Zie JavaScript-functies aanroepen vanuit .NET-methoden in ASP.NET Core Blazorvoor meer informatie over JavaScript-isolatie met JavaScript-modules.

Hash-routering naar benoemde elementen

Navigeer naar een benoemd element met behulp van de volgende benaderingen met een hash-verwijzing (#) naar het element. Routes naar elementen binnen het onderdeel en routes naar elementen in externe onderdelen maken gebruik van hoofd-relatieve paden. Een voorwaartse slash (/) is optioneel.

Voorbeelden voor elk van de volgende methoden tonen hoe te navigeren naar een element met een id van targetElement in het Counter onderdeel.

Ankerelement (<a>) met een href:
```
<a href="/counter#targetElement">
```

NavLink component met een href:

<NavLink href="/counter#targetElement">

NavigationManager.NavigateTo de relatieve URL doorgeven:
```
Navigation.NavigateTo("/counter#targetElement");
```

In het volgende voorbeeld ziet u hash-routering naar benoemde H2-koppen binnen een onderdeel en naar externe onderdelen.

Plaats in de onderdelen Home (Home.razor) en Counter (Counter.razor) de volgende markeringen onder aan de bestaande onderdeelmarkeringen om als navigatiedoelen te fungeren. De <div> maakt kunstmatige verticale ruimte om het schuifgedrag van de browser te demonstreren:

<div class="border border-info rounded bg-info" style="height:500px"></div>

<h2 id="targetElement">Target H2 heading</h2>
<p>Content!</p>

Voeg het volgende HashedRouting-onderdeel toe aan de app.

HashedRouting.razor:

@page "/hashed-routing"
@inject NavigationManager Navigation

<PageTitle>Hashed routing</PageTitle>

<h1>Hashed routing to named elements</h1>

<ul>
    <li>
        <a href="/hashed-routing#targetElement">
            Anchor in this component
        </a>
    </li>
    <li>
        <a href="/#targetElement">
            Anchor to the <code>Home</code> component
        </a>
    </li>
    <li>
        <a href="/counter#targetElement">
            Anchor to the <code>Counter</code> component
        </a>
    </li>
    <li>
        <NavLink href="/hashed-routing#targetElement">
            Use a `NavLink` component in this component
        </NavLink>
    </li>
    <li>
        <button @onclick="NavigateToElement">
            Navigate with <code>NavigationManager</code> to the 
            <code>Counter</code> component
        </button>
    </li>
</ul>

<div class="border border-info rounded bg-info" style="height:500px"></div>

<h2 id="targetElement">Target H2 heading</h2>
<p>Content!</p>

@code {
    private void NavigateToElement()
    {
        Navigation.NavigateTo("/counter#targetElement");
    }
}

Gebruikersinteractie met `<Navigating>` inhoud

Als er een aanzienlijke vertraging is tijdens de navigatie, zoals tijdens lazy-loading-assemblies in een Blazor WebAssembly app of voor een trage netwerkverbinding met een Blazor server-side app, kan het Router onderdeel aangeven dat er een paginaovergang plaatsvindt.

Voeg boven aan het onderdeel dat het Router onderdeel aangeeft, een @using-instructie toe voor de Microsoft.AspNetCore.Components.Routing-naamruimte:

@using Microsoft.AspNetCore.Components.Routing

Geef inhoud op voor de Navigating parameter voor weergave tijdens paginaovergangsevenementen.

Inhoud in het routerelement (<Router>...</Router>):

<Navigating>
    <p>Loading the requested page&hellip;</p>
</Navigating>

Zie Lazy load assembly's in ASP.NET Core Blazor WebAssemblyvoor een voorbeeld dat gebruikmaakt van de eigenschap Navigating.

Asynchrone navigatie-gebeurtenissen afhandelen met `OnNavigateAsync`

Het Router-onderdeel ondersteunt een OnNavigateAsync functie. De OnNavigateAsync handler wordt aangeroepen wanneer de gebruiker:

Bezoekt een route voor de eerste keer door er rechtstreeks in hun browser naar te navigeren.
Hiermee gaat u naar een nieuwe route met behulp van een koppeling of een NavigationManager.NavigateTo aanroep.

<Router AppAssembly="typeof(App).Assembly" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        ...
    }
}

<Router AppAssembly="typeof(Program).Assembly" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        ...
    }
}

Zie Lazy load assembly's in ASP.NET Core Blazor WebAssemblyvoor een voorbeeld waarin OnNavigateAsyncwordt gebruikt.

Bij het prerenderen op de server wordt OnNavigateAsynctwee keeruitgevoerd:

Eenmaal wanneer het aangevraagde eindpuntonderdeel in eerste instantie statisch wordt weergegeven.
Een tweede keer dat de browser het eindpuntonderdeel weergeeft.

Om te voorkomen dat ontwikkelaarscode in OnNavigateAsync twee keer wordt uitgevoerd, kan het Routes onderdeel de NavigationContext opslaan voor gebruik in de OnAfterRender{Async} levenscyclusmethode, waar firstRender kan worden gecontroleerd. Zie Prerendering with JavaScript interopvoor meer informatie.

Om te voorkomen dat ontwikkelaarscode in OnNavigateAsync twee keer wordt uitgevoerd, kan het App onderdeel de NavigationContext opslaan voor gebruik in OnAfterRender{Async}, waar firstRender kan worden gecontroleerd. Zie Prerendering with JavaScript interopvoor meer informatie.

Annuleringen in `OnNavigateAsync` verwerken

Het NavigationContext-object dat wordt doorgegeven aan de OnNavigateAsync callback bevat een CancellationToken die is ingesteld wanneer er een nieuwe navigatiegebeurtenis plaatsvindt. De OnNavigateAsync callback moet worden gegenereerd wanneer dit annuleringstoken is ingesteld om te voorkomen dat de OnNavigateAsync callback wordt uitgevoerd op een verouderde navigatie.

Als een gebruiker naar een eindpunt navigeert, maar vervolgens onmiddellijk naar een nieuw eindpunt navigeert, moet de app niet doorgaan met het uitvoeren van de OnNavigateAsync callback voor het eerste eindpunt.

In het volgende voorbeeld:

Het annuleringstoken wordt doorgegeven in de aanroep naar PostAsJsonAsync, waardoor de POST kan worden geannuleerd als de gebruiker weg navigeert van het /about-eindpunt.
Het annuleringstoken wordt ingesteld tijdens een prefetch-bewerking van een product als de gebruiker weg navigeert van het /store-eindpunt.

@inject HttpClient Http
@inject ProductCatalog Products

<Router AppAssembly="typeof(App).Assembly" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext context)
    {
        if (context.Path == "/about") 
        {
            var stats = new Stats { Page = "/about" };
            await Http.PostAsJsonAsync("api/visited", stats, 
                context.CancellationToken);
        }
        else if (context.Path == "/store")
        {
            var productIds = new[] { 345, 789, 135, 689 };

            foreach (var productId in productIds) 
            {
                context.CancellationToken.ThrowIfCancellationRequested();
                Products.Prefetch(productId);
            }
        }
    }
}

@inject HttpClient Http
@inject ProductCatalog Products

<Router AppAssembly="typeof(Program).Assembly" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext context)
    {
        if (context.Path == "/about") 
        {
            var stats = new Stats { Page = "/about" };
            await Http.PostAsJsonAsync("api/visited", stats, 
                context.CancellationToken);
        }
        else if (context.Path == "/store")
        {
            var productIds = new[] { 345, 789, 135, 689 };

            foreach (var productId in productIds) 
            {
                context.CancellationToken.ThrowIfCancellationRequested();
                Products.Prefetch(productId);
            }
        }
    }
}

Notitie

Niet gooien als het annuleringstoken in NavigationContext is geannuleerd, kan leiden tot onbedoeld gedrag, zoals het weergeven van een component van een eerdere navigatie.

Locatiewijzigingen afhandelen/voorkomen

RegisterLocationChangingHandler registreert een handler voor het verwerken van binnenkomende navigatie-gebeurtenissen. De context van de handler die door LocationChangingContext wordt geleverd, bevat de volgende eigenschappen:

TargetLocation: haalt de doellocatie op.
HistoryEntryState: Haalt de status op die gekoppeld is aan de doelgeschiedenisvermelding.
IsNavigationIntercepted: Geeft aan of de navigatie is onderschept door een koppeling.
CancellationToken: Hiermee wordt een CancellationToken opgehaald om vast te stellen of de navigatie is geannuleerd, bijvoorbeeld om te bepalen of de gebruiker een andere navigatie heeft geactiveerd.
PreventNavigation: aangeroepen om te voorkomen dat de navigatie doorgaat.

Een onderdeel kan meerdere locatie wijzigende handlers registreren in de OnAfterRender{Async} levenscyclusmethode. Navigatie roept alle locatie wijzigende handlers aan die zijn geregistreerd in de hele app (over meerdere onderdelen) en elke interne navigatie voert ze allemaal parallel uit. Naast NavigateTo handlers worden aangeroepen:

Wanneer u interne koppelingen selecteert, die koppelingen zijn die verwijzen naar URL's onder het basispad van de app.
Wanneer u navigeert met behulp van de knoppen voor vooruit en terug in een browser.

Handlers worden alleen uitgevoerd voor navigatie binnen de app. Als de gebruiker een koppeling selecteert die naar een andere site navigeert of de adresbalk handmatig naar een andere site wijzigt, worden de handlers voor locatiewijzigingen niet uitgevoerd.

Implementeer IDisposable en verwijder geregistreerde handlers om de registratie ervan ongedaan te maken. Zie ASP.NET Core Razor levenscyclus van onderdelen voor meer informatie.

Belangrijk

Probeer geen DOM-opschoontaken uit te voeren via JavaScript (JS) interop bij het afhandelen van locatiewijzigingen. Gebruik het MutationObserver patroon in JS op de client. Zie ASP.NET Core Blazor JavaScript-interoperabiliteit (JS interop)voor meer informatie.

In het volgende voorbeeld wordt een locatiewijzigende handler geregistreerd voor navigatiegebeurtenissen.

NavHandler.razor:

@page "/nav-handler"
@implements IDisposable
@inject NavigationManager Navigation

<p>
    <button @onclick="@(() => Navigation.NavigateTo("/"))">
        Home (Allowed)
    </button>
    <button @onclick="@(() => Navigation.NavigateTo("/counter"))">
        Counter (Prevented)
    </button>
</p>

@code {
    private IDisposable? registration;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            registration = 
                Navigation.RegisterLocationChangingHandler(OnLocationChanging);
        }
    }

    private ValueTask OnLocationChanging(LocationChangingContext context)
    {
        if (context.TargetLocation == "/counter")
        {
            context.PreventNavigation();
        }

        return ValueTask.CompletedTask;
    }

    public void Dispose() => registration?.Dispose();
}

Omdat interne navigatie asynchroon kan worden geannuleerd, kunnen er meerdere overlappende aanroepen naar geregistreerde handlers optreden. Er kunnen bijvoorbeeld meerdere handleraanroepen optreden wanneer de gebruiker snel de knop Terug op een pagina selecteert of meerdere koppelingen selecteert voordat een navigatie wordt uitgevoerd. Hier volgt een samenvatting van de asynchrone navigatielogica:

Als er locatiewijzigingshandlers zijn geregistreerd, wordt alle navigatie aanvankelijk teruggezet en vervolgens herhaald indien de navigatie niet wordt geannuleerd.
Als er overlappende navigatieaanvragen worden gedaan, annuleert de meest recente aanvraag altijd eerdere aanvragen, wat het volgende betekent:
- De app kan meerdere selecties van de terug- en doorgaan-knoppen beschouwen als één selectie.
- Als de gebruiker meerdere koppelingen selecteert voordat de navigatie is voltooid, bepaalt de laatste geselecteerde koppeling de navigatie.

Zie de sectie Navigatieopties voor meer informatie over het doorgeven van NavigationOptions naar NavigateTo voor het beheren van vermeldingen en de status van de navigatiegeschiedenisstapel.

Zie de NavigationManagerComponent in de BasicTestApp (dotnet/aspnetcore referentiebron) voor aanvullende voorbeeldcode.

Notitie

Documentatiekoppelingen naar .NET-referentiebron laden meestal de standaardbranch van de opslagplaats, die de huidige ontwikkeling vertegenwoordigt voor de volgende release van .NET. Als u een tag voor een specifieke release wilt selecteren, gebruikt u de Switch-vertakkingen of tags vervolgkeuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.

Het NavigationLock onderdeel navigatiegebeurtenissen onderschept zolang het wordt weergegeven, zodat elke navigatie wordt vergrendeld totdat een beslissing wordt genomen om door te gaan of te annuleren. Gebruik NavigationLock wanneer het onderscheppen van de navigatie beperkt kan worden tot de levensduur van een component.

NavigationLock parameters:

ConfirmExternalNavigation stelt een browserdialoogvenster in om de gebruiker te vragen om externe navigatie te bevestigen of te annuleren. De standaardwaarde is false. Voor het weergeven van het bevestigingsdialoogvenster is de initiële interactie van de gebruiker met de pagina vereist voordat externe navigatie met de URL in de adresbalk van de browser wordt geactiveerd. Zie Venster: beforeunload gebeurtenis (MDN-documentatie)voor meer informatie over de interactievereiste.
OnBeforeInternalNavigation stelt een callback in voor interne navigatiegebeurtenissen.

In het volgende NavLock onderdeel:

Een poging om de koppeling naar de website van Microsoft te volgen, moet door de gebruiker worden bevestigd voordat de navigatie naar https://www.microsoft.com slaagt.
PreventNavigation wordt aangeroepen om te voorkomen dat navigatie plaatsvindt als de gebruiker weigert de navigatie te bevestigen via een JavaScript (JS) interop-aanroep die het JSconfirm dialoogvensteropent.

NavLock.razor:

@page "/nav-lock"
@inject IJSRuntime JSRuntime
@inject NavigationManager Navigation

<NavigationLock ConfirmExternalNavigation="true" 
    OnBeforeInternalNavigation="OnBeforeInternalNavigation" />

<p>
    <button @onclick="Navigate">Navigate</button>
</p>

<p>
    <a href="https://www.microsoft.com">Microsoft homepage</a>
</p>

@code {
    private void Navigate()
    {
        Navigation.NavigateTo("/");
    }

    private async Task OnBeforeInternalNavigation(LocationChangingContext context)
    {
        var isConfirmed = await JSRuntime.InvokeAsync<bool>("confirm", 
            "Are you sure you want to navigate to the root page?");

        if (!isConfirmed)
        {
            context.PreventNavigation();
        }
    }
}

Zie het ConfigurableNavigationLock-onderdeel in de BasicTestApp (dotnet/aspnetcore referentiebron) voor aanvullende voorbeeldcode.

`NavLink`-onderdeel

Gebruik een NavLink onderdeel in plaats van HTML-hyperlinkelementen (<a>) bij het maken van navigatiekoppelingen. Een NavLink-onderdeel gedraagt zich als een <a>-element, behalve dat er een active CSS-klasse wordt ingeschakeld op basis van of de href overeenkomt met de huidige URL. De active-klasse helpt een gebruiker te begrijpen welke pagina de actieve pagina is tussen de weergegeven navigatiekoppelingen. Wijs desgewenst een CSS-klassenaam toe aan NavLink.ActiveClass om een aangepaste CSS-klasse toe te passen op de weergegeven koppeling wanneer de huidige route overeenkomt met de href.

Er zijn twee NavLinkMatch opties die u kunt toewijzen aan het kenmerk Match van het <NavLink>-element:

NavLinkMatch.All: de NavLink is actief wanneer deze overeenkomt met de huidige URL, waarbij de querytekenreeks en het fragment worden genegeerd. Gebruik de Microsoft.AspNetCore.Components.Routing.NavLink.DisableMatchAllIgnoresLeftUriPartAppContext switchom overeenkomende waarden op te nemen in de querytekenreeks/-fragment.
NavLinkMatch.Prefix (standaard-): de NavLink is actief wanneer deze overeenkomt met een voorvoegsel van de huidige URL.

Er zijn twee NavLinkMatch opties die u kunt toewijzen aan het kenmerk Match van het <NavLink>-element:

NavLinkMatch.All: de NavLink is actief wanneer deze overeenkomt met de volledige huidige URL, inclusief de queryreeks en het fragment.
NavLinkMatch.Prefix (standaard-): de NavLink is actief wanneer deze overeenkomt met een voorvoegsel van de huidige URL.

In het voorgaande voorbeeld komt de HomeNavLinkhref="" overeen met de startpagina-URL en ontvangt alleen de active CSS-klasse op het standaardbasispad van de app (/). De tweede NavLink ontvangt de active klasse wanneer de gebruiker een URL bezoekt met een component voorvoegsel (bijvoorbeeld /component en /component/another-segment).

Als u aangepaste overeenkomende logica wilt gebruiken, maak een subklasse van NavLink en overschrijf de ShouldMatch-methode. Retourneer true uit de methode wanneer u de active CSS-klasse wilt toepassen:

public class CustomNavLink : NavLink
{
    protected override bool ShouldMatch(string currentUriAbsolute)
    {
        // Custom matching logic
    }
}

Aanvullende NavLink onderdeelkenmerken worden doorgegeven aan de gerenderde ankertag. In het volgende voorbeeld bevat het NavLink onderdeel het kenmerk target:

<NavLink href="example-page" target="_blank">Example page</NavLink>

De volgende HTML-opmaak wordt weergegeven:

<a href="example-page" target="_blank">Example page</a>

Waarschuwing

Vanwege de manier waarop Blazor onderliggende inhoud weergeeft, vereist het weergeven van NavLink componenten in een for lus een lokale indexvariabele als de incrementele lusvariabele wordt gebruikt in de inhoud van de NavLink (onderliggende) component:

@for (int c = 1; c < 4; c++)
{
    var ct = c;
    <li ...>
        <NavLink ...>
            <span ...></span> Product #@ct
        </NavLink>
    </li>
}

Het gebruik van een indexvariabele in dit scenario is een vereiste voor elke kindcomponent die gebruikmaakt van een lusvariabele in de kindinhoud, niet alleen de NavLink-component.

U kunt ook een foreach lus gebruiken met Enumerable.Range:

@foreach (var c in Enumerable.Range(1, 3))
{
    <li ...>
        <NavLink ...>
            <span ...></span> Product #@c
        </NavLink>
    </li>
}

NavLink onderdeelvermeldingen kunnen dynamisch worden gemaakt op basis van de onderdelen van de app via weerspiegeling. In het volgende voorbeeld ziet u de algemene benadering voor verdere aanpassing.

Voor de volgende demonstratie wordt een consistente, standaardnaamconventie gebruikt voor de onderdelen van de app:

Namen van routeerbare onderdelen maken gebruik van Pascal-case†, bijvoorbeeld Pages/ProductDetail.razor.
Routeerbare bestandspaden voor componenten komen overeen met hun URL's in kebab case, met afbreekstreepjes die tussen woorden verschijnen in de routesjabloon van een component. Een ProductDetail-onderdeel met een routesjabloon van /product-detail (@page "/product-detail") wordt bijvoorbeeld aangevraagd in een browser op de relatieve URL /product-detail.

†Pascal case (upper camel case) is een naamconventie zonder spaties en interpunctie, waarbij de eerste letter van elk woord een hoofdletter is, inclusief het eerste woord.
‡Kebab case is een naamgevingsconventie zonder spaties en leestekens die gebruik maakt van kleine letters en streepjes tussen woorden.

In de Razor opmaak van het NavMenu-onderdeel (NavMenu.razor) onder de standaardpagina Home worden NavLink onderdelen toegevoegd uit een verzameling:

<div class="nav-scrollable" 
    onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" 
                    aria-hidden="true"></span> Home
            </NavLink>
        </div>

+       @foreach (var name in GetRoutableComponents())
+       {
+           <div class="nav-item px-3">
+               <NavLink class="nav-link" 
+                       href="@Regex.Replace(name, @"(\B[A-Z]|\d+)", "-$1").ToLower()">
+                   @Regex.Replace(name, @"(\B[A-Z]|\d+)", " $1")
+               </NavLink>
+           </div>
+       }

    </nav>
</div>

De methode GetRoutableComponents in het @code blok:

public IEnumerable<string> GetRoutableComponents() => 
    Assembly.GetExecutingAssembly()
        .ExportedTypes
        .Where(t => t.IsSubclassOf(typeof(ComponentBase)))
        .Where(c => c.GetCustomAttributes(inherit: true)
                     .OfType<RouteAttribute>()
                     .Any())
        .Where(c => c.Name != "Home" && c.Name != "Error")
        .OrderBy(o => o.Name)
        .Select(c => c.Name);

Het voorgaande voorbeeld bevat niet de volgende pagina's in de weergegeven lijst met onderdelen:

Home pagina: de pagina wordt afzonderlijk weergegeven van de automatisch gegenereerde koppelingen, omdat deze boven aan de lijst moet worden weergegeven en de parameter Match moet worden ingesteld.
Error pagina: de foutpagina wordt alleen door het framework genavigeerd en mag niet worden weergegeven.

Voor een voorbeeld van de voorgaande code in een voorbeeld-app die u lokaal kunt uitvoeren, verkrijgt u de Blazor Web App of Blazor WebAssembly voorbeeld-app.

integratie van ASP.NET Core-eindpuntroutering

Deze sectie is van toepassing op Blazor Web Appdie via een circuit werken.

Deze sectie is van toepassing op Blazor Server apps.

Een Blazor Web App is geïntegreerd in ASP.NET Core Endpoint Routing. Een ASP.NET Core-app is geconfigureerd voor het accepteren van binnenkomende verbindingen voor interactieve onderdelen met MapRazorComponents in het Program-bestand. Het standaardhoofdonderdeel (eerste geladen) is het App-onderdeel (App.razor):

app.MapRazorComponents<App>();

Blazor Server is geïntegreerd in ASP.NET Core Endpoint Routing. Een ASP.NET Core-app is geconfigureerd voor het accepteren van binnenkomende verbindingen voor interactieve onderdelen met MapBlazorHub in het bestand Program:

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

De gebruikelijke configuratie is het routeren van alle aanvragen naar een Razor pagina, die fungeert als de host voor het servergedeelte van de Blazor Server-app. De -hostpagina wordt doorgaans _Host.cshtml genoemd in de map Pages van de app.

De route die is opgegeven in het hostbestand wordt een terugvalroute genoemd omdat deze werkt met een lage prioriteit in routekoppeling. De terugvalroute wordt gebruikt wanneer andere routes niet overeenkomen. Hierdoor kan de app andere controllers en pagina's gebruiken zonder de routering van onderdelen in de Blazor Server-app te verstoren.

Zie Host en implementeer ASP.NET Core Blazorvoor meer informatie over het configureren van MapFallbackToPage voor hostservers die geen hoofd-URL-server hosten.

Delen via

ASP.NET Core Blazor routing en navigatie

Statische versus interactieve routering

Routesjablonen

Een element op navigatie richten

Aangepaste inhoud opgeven wanneer inhoud niet wordt gevonden

Routeren naar onderdelen van meerdere assembly's

Statische routering

Interactieve routering

Routeparameters

Routebeperkingen

Bestandsopname voorkomen in een routeparameter

Routering met URL's die puntjes bevatten

Parameters voor een uitgebreide route

Helpers voor URI- en navigatiestatus

Locatiewijzigingen

Verbeterde verwerking van navigatie en formulieren

Een URI produceren ten opzichte van het basis-URI-voorvoegsel

Status van navigatiegeschiedenis

Navigatieopties

Query-strings

Een queryparameterwaarde vervangen wanneer de parameter bestaat

Een queryparameter en -waarde toevoegen wanneer de parameter niet bestaat

Een queryparameter verwijderen wanneer de parameterwaarde is `null`

Queryparameters toevoegen, bijwerken en verwijderen

Ondersteuning voor opsommingsbare waarden

Navigeren met een toegevoegde of gewijzigde queryreeks

Hash-routering naar benoemde elementen

Gebruikersinteractie met `<Navigating>` inhoud

Asynchrone navigatie-gebeurtenissen afhandelen met `OnNavigateAsync`

Annuleringen in `OnNavigateAsync` verwerken

Locatiewijzigingen afhandelen/voorkomen

`NavLink`-onderdeel

integratie van ASP.NET Core-eindpuntroutering

Aanvullende resources

Delen via

ASP.NET Core Blazor routing en navigatie

Statische versus interactieve routering

Routesjablonen

Een element op navigatie richten

Aangepaste inhoud opgeven wanneer inhoud niet wordt gevonden

Routeren naar onderdelen van meerdere assembly's

Statische routering

Interactieve routering

Routeparameters

Routebeperkingen

Bestandsopname voorkomen in een routeparameter

Routering met URL's die puntjes bevatten

Parameters voor een uitgebreide route

Helpers voor URI- en navigatiestatus

Locatiewijzigingen

Verbeterde verwerking van navigatie en formulieren

Een URI produceren ten opzichte van het basis-URI-voorvoegsel

Status van navigatiegeschiedenis

Navigatieopties

Query-strings

Een queryparameterwaarde vervangen wanneer de parameter bestaat

Een queryparameter en -waarde toevoegen wanneer de parameter niet bestaat

Een queryparameter verwijderen wanneer de parameterwaarde is null

Queryparameters toevoegen, bijwerken en verwijderen

Ondersteuning voor opsommingsbare waarden

Navigeren met een toegevoegde of gewijzigde queryreeks

Hash-routering naar benoemde elementen

Gebruikersinteractie met <Navigating> inhoud

Asynchrone navigatie-gebeurtenissen afhandelen met OnNavigateAsync

Annuleringen in OnNavigateAsync verwerken

Locatiewijzigingen afhandelen/voorkomen

NavLink-onderdeel

integratie van ASP.NET Core-eindpuntroutering

Aanvullende resources

Een queryparameter verwijderen wanneer de parameterwaarde is `null`

Gebruikersinteractie met `<Navigating>` inhoud

Asynchrone navigatie-gebeurtenissen afhandelen met `OnNavigateAsync`

Annuleringen in `OnNavigateAsync` verwerken

`NavLink`-onderdeel