ASP.NET Core Blazor útválasztás és navigáció

Jegyzet

Ez nem a cikk legújabb verziója. Az aktuális kiadásról a cikk .NET 10-es verziójában olvashat.

Figyelmeztetés

A ASP.NET Core ezen verziója már nem támogatott. További információ: .NET és .NET Core támogatási szabályzat. Az aktuális kiadáshoz lásd a cikk .NET 9-es verzióját.

Ez a cikk bemutatja, hogyan kezelheti Blazor alkalmazáskérések útválasztását, és hogyan használhatja a NavLink összetevőt navigációs hivatkozások létrehozásához.

Fontos

A cikkben szereplő kódpéldák olyan metódusokat hívnak meg a Navigation-on, amelyek egy osztályokba és összetevőkbe injektált NavigationManager-re vonatkoznak.

Statikus és interaktív útválasztás

Ez a szakasz a Blazor Web Apps. szól.

Ha a előrenderelés engedélyezve van, a Blazor útválasztó (Router összetevő, <Router>Routes.razor) statikus útválasztást hajt végre az összetevőkhöz a statikus kiszolgálóoldali renderelés során (statikus SSR). Ezt az útválasztási típust statikus útválasztásnaknevezik.

Ha egy interaktív renderelési mód van hozzárendelve a Routes összetevőhöz, a Blazor útválasztó interaktívvá válik a statikus SSR után a kiszolgálón statikus útválasztással. Ezt az útválasztási típust interaktív útválasztásinevezik.

A statikus útválasztók végpont-útválasztással és HTTP-kérési útvonalsal határozzák meg, hogy melyik összetevőt kell megjeleníteni. Amikor az útválasztó interaktívvá válik, a dokumentum URL-címével (a böngésző címsorában található URL-címmel) határozza meg, hogy melyik összetevőt szeretné megjeleníteni. Ez azt jelenti, hogy az interaktív útválasztó dinamikusan módosíthatja, hogy melyik összetevő jelenik meg, ha a dokumentum URL-címe dinamikusan egy másik érvényes belső URL-címre változik, és ezt anélkül teheti meg, hogy HTTP-kérést hajt végre az új oldaltartalom beolvasásához.

Az interaktív útválasztás azért is megakadályozza az előrendelést, mert a rendszer nem kér új laptartalmat a kiszolgálótól normál lapkérelem esetén. További információ: ASP.NET Core Blazor előre beállított állapotmegőrzés.

Útvonalsablonok

A Router összetevő lehetővé teszi Razor összetevők útválasztását, és az alkalmazás Routes összetevőjében (Components/Routes.razor) található.

A Router összetevő lehetővé teszi az útválasztást Razor komponensekhez. A Router összetevőt a App összetevő (App.razor) használja.

Ha egy összetevőt (), amely egy irányelvvel rendelkezik, lefordítunk, a létrehozott összetevőosztály számára egy lesz biztosítva, amely az összetevő útvonalsablonját határozza meg.

Amikor az alkalmazás elindul, a Router AppAssembly-ként megadott szerelvényt átvizsgálják, hogy összegyűjtsék az útvonal információkat az alkalmazás azon összetevőihez, amelyek RouteAttribute-el rendelkeznek.

Futásidőben a RouteView komponens:

A RouteData megkapja a Router-től az összes útvonalparaméterrel együtt.
Rendereli a megadott összetevőt a elrendezésével, beleértve a további beágyazott elrendezéseket is.

Igény szerint megadhat egy DefaultLayout paramétert olyan összetevők elrendezési osztályával, amelyek nem a @layout irányelvelrendezését adják meg. A keretrendszer Blazor projektsablonjai az alkalmazás alapértelmezett elrendezéseként a MainLayout összetevőt (MainLayout.razor) adhatja meg. További információ az elrendezésekről: ASP.NET Core Blazor elrendezések.

Az összetevők több útvonalsablont támogatnak több @page direktívahasználatával. Az alábbi példaösszetevő betöltődik, amikor a /blazor-route és a /different-blazor-routekérések érkeznek.

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>

Fontos

Ahhoz, hogy az URL-címek megfelelően feloldódjanak, az alkalmazásnak tartalmaznia kell egy <base> címkét (<head> tartalom helyét) a href attribútumban megadott alkalmazásbázis-elérési úttal. További információ: ASP.NET Core-alkalmazás Blazor alap elérési útja.

A Router nem használja a lekérdezési sztring értékeit. A lekérdezési sztringek használatához tekintse meg a Lekérdezési sztringek szakaszt.

Alternatívaként az útvonalsablon szövegként történő megadására az @page irányelvvel, konstansokra épülő útvonalsablonok is megadhatók az @attribute irányelvsegítségével.

Az alábbi példában egy összetevő @page irányelve helyébe a @attribute irányelv és a Constants.CounterRouteállandóalapú útvonalsablonja lép, amely az alkalmazás más részein a következőre van állítva: "/counter":

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

Jegyzet

A .NET 5.0.1 kiadásával és minden további 5.x kiadás esetén az Router összetevő tartalmazza a PreferExactMatches következő paramétert @true: . További információ: Migrálás ASP.NET Core 3.1-ről .NET 5-be.

A FocusOnNavigate összetevő egy CSS-választón alapuló elemre állítja a felhasználói felület fókuszát, miután egyik oldalról a másikra navigált.

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

Amikor a Router összetevő egy új lapra navigál, a FocusOnNavigate összetevő a lap felső szintű fejlécére (<h1>) helyezi a fókuszt. Ez egy gyakori stratégia annak biztosítására, hogy a képernyőolvasó használatakor az oldalnavigációt bejelentse.

Egyéni tartalom megadása, ha a tartalom nem található

A Router összetevő lehetővé teszi, hogy az alkalmazás egyéni tartalmat adjon meg, ha a kért útvonalon nem található tartalom.

Egyéni tartalom beállítása az Router összetevő NotFound paraméteréhez:

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

Az tetszőleges elemek a NotFound paraméter tartalmaként támogatottak, például más interaktív összetevők. Ha alapértelmezett elrendezést szeretne alkalmazni NotFound tartalomra, tekintse meg ASP.NET Core Blazor elrendezéseit.

Blazor Web Appnem használja a NotFound paramétert (<NotFound>...</NotFound> jelölés), de a paraméter támogatott† a .NET 8/9-ben való visszamenőleges kompatibilitás érdekében a keretrendszer nagyobb változásának elkerülése érdekében. A kiszolgálóoldali ASP.NET Core köztes szoftverfolyamat feldolgozza a kiszolgálón lévő kéréseket. Használjon kiszolgálóoldali technikákat a hibás kérések kezeléséhez.

†támogatott ebben a kontextusban azt jelenti, hogy a <NotFound>...</NotFound> jelölés elhelyezése nem eredményez kivételt, de a jelölés használata sem hatásos.

További információ:

Útvonal több szerelvényből származó komponensekhez

Ez a szakasz a Blazor Web Apps. szól.

A Router összetevő AdditionalAssemblies paraméterének és a végpontkonvenció-szerkesztő AddAdditionalAssemblies-nek a segítségével felfedezheti a további szerelvényekben található útválasztható összetevőket. Az alábbi alszakaszok bemutatják, hogy mikor és hogyan kell használni az egyes API-kat.

Statikus útválasztás

A statikus kiszolgálóoldali rendereléshez (statikus SSR) szükséges további szerelvényekből származó útvonalasítható összetevők felfedezéséhez, még akkor is, ha a router később interaktívvá válik az interaktív rendereléshez, a szerelvényeket közzé kell tenni a Blazor keretrendszer számára. Hívja meg a AddAdditionalAssemblies metódust a kiszolgálóprojekt MapRazorComponents fájljában lévő, Program-hez összeláncolt további szerelvényekkel.

Az alábbi példa a BlazorSample.Client projekt szerelvényei közé tartozó routable összetevőket tartalmazza, a projekt _Imports.razor fájlját használva.

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

Jegyzet

Az előző útmutató összetevőosztály-kódtár forgatókönyvekre is vonatkozik. Az osztálykönyvtárakhoz és a statikus SSR-hez további fontos útmutatást talál az ASP.NET Core Razor osztálykönyvtárakban (RCLs), amelyek statikus kiszolgálóoldali rendereléssel.

Interaktív útválasztás

A Routes összetevőhöz (Routes.razor) interaktív renderelési mód rendelhető, amely lehetővé teszi, hogy a Blazor útválasztó interaktívvá váljon a statikus SSR és a statikus útválasztás után a kiszolgálón. Például <Routes @rendermode="InteractiveServer" /> az interaktív kiszolgálóoldali renderelést (interaktív SSR) rendeli hozzá a Routes összetevőhöz. A Router összetevő örökli az interaktív kiszolgálóoldali renderelést (interaktív SSR) a Routes összetevőtől. Az útválasztó interaktívvá válik a szerveren végzett statikus útválasztás után.

Az interaktív útválasztás belső navigációja nem foglalja magában az új laptartalom kérését a kiszolgálótól. Ezért a belső oldalkérések esetében nem történik meg az előrenderelés. További információ: ASP.NET Core Blazor előre beállított állapotmegőrzés.

Ha a Routes összetevő a kiszolgálóprojektben van definiálva, a AdditionalAssemblies összetevő Router paraméterének tartalmaznia kell a .Client projekt szerelvényét. Lehetővé teszi, hogy az útválasztó interaktív rendereléskor megfelelően működjön.

Az alábbi példában a Routes összetevő a kiszolgálóprojektben található, és a _Imports.razor projekt BlazorSample.Client fájlja jelzi az összeszerelést a továbbítható összetevők kereséséhez.

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

A rendszer a AppAssembly megadott szerelvényen kívül további szerelvényeket is beolvas.

Jegyzet

Az előző útmutató összetevőosztály-kódtár forgatókönyvekre is vonatkozik.

Alternatívaként, a csak a .Client projektben létező irányítható összetevők globális interaktív WebAssembly vagy automatikus rendereléssel kerülnek alkalmazásra, és a Routes összetevő a .Client projektben van meghatározva, nem a kiszolgáló projektben. Ebben az esetben nincsenek olyan külső szerelvények, amelyek kivehető összetevőkkel rendelkeznek, ezért nem szükséges megadni a AdditionalAssembliesértékét.

Ez a szakasz Blazor Server alkalmazásokra vonatkozik.

Az alábbi példában a Component1 egy routolható összetevő, amely egy névre hivatkozott összetevőosztály könyvtárban van definiálva, amelynek neve ComponentLibrary.

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

A rendszer a AppAssembly megadott szerelvényen kívül további szerelvényeket is beolvas.

Útvonalparaméterek

Az útválasztó útvonalparaméterekkel tölti fel a megfelelő komponensparamétereket ugyanilyen névvel. Az útvonalparaméterek nevei nem érzékenyek a kis- és nagybetűkre. Az alábbi példában a text paraméter az útvonalszegmens értékét rendeli hozzá az összetevő Text tulajdonságához. Amikor egy kérés érkezik /route-parameter-1/amazing-ra, a tartalom Blazor is amazing!-ként jelenik meg.

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; }
}

A választható paraméterek támogatottak. Az alábbi példában a text választható paraméter az útvonalszegmens értékét rendeli hozzá az összetevő Text tulajdonságához. Amennyiben a szegmens nincs jelen, a Text értéke fantastic lesz.

A választható paraméterek nem támogatottak. Az alábbi példában két @page irányelv érvényesül. Az első irányelv lehetővé teszi az összetevő paraméter nélküli navigálását. A második irányelv az {text} útvonalparaméter értékét rendeli hozzá az összetevő Text tulajdonságához.

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";
    }
}

Ha a OnInitialized{Async} életciklus-metódushelyett OnParametersSet{Async} életciklus-metódust használja, a Text tulajdonság alapértelmezett hozzárendelése nem történik meg fantastic, ha a felhasználó ugyanabban az összetevőben navigál. Ez a helyzet például akkor fordul elő, amikor a felhasználó /route-parameter-2/amazing-ről /route-parameter-2-re navigál. Mivel az összetevőpéldány továbbra is megmarad, és új paramétereket fogad el, a OnInitialized metódus nem lesz újra meghívva.

Jegyzet

Az útvonalparaméterek nem működnek lekérdezési sztringértékekkel. A lekérdezési sztringek használatához tekintse meg a Lekérdezési sztringek szakaszt.

Útvonalkorlátozások

Az útvonalkorlátozás egy útvonalszegmens típusának megfelelő illesztését kényszeríti ki egy összetevőre.

A következő példában a User összetevőhöz vezető útvonal csak akkor egyezik meg, ha:

A kérelem URL-címében Id útvonalszakasz található.
A Id szegmens egész (int) típusú.

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; }
}

Jegyzet

Az útvonalkorlátozások nem működnek lekérdezési sztringértékekkel. A lekérdezési sztringek használatához tekintse meg a Lekérdezési sztringek szakaszt.

Az alábbi táblázatban látható útvonalkorlátozások elérhetők. Az invariáns kultúrának megfelelő útvonalkorlátozásokról további információt a táblázat alatti figyelmeztetésben talál.

Kényszer	Példa	Példa egyezések	Invariáns kulturális környezet összeillő
`bool`	`{active:bool}`	`true`, `FALSE`	Nem
`datetime`	`{dob:datetime}`	`2016-12-31`, `2016-12-31 7:32pm`	Igen
`decimal`	`{price:decimal}`	`49.99`, `-1,000.01`	Igen
`double`	`{weight:double}`	`1.234`, `-1,001.01e8`	Igen
`float`	`{weight:float}`	`1.234`, `-1,001.01e8`	Igen
`guid`	`{id:guid}`	`00001111-aaaa-2222-bbbb-3333cccc4444`, `{00001111-aaaa-2222-bbbb-3333cccc4444}`	Nem
`int`	`{id:int}`	`123456789`, `-123456789`	Igen
`long`	`{ticks:long}`	`123456789`, `-123456789`	Igen
`nonfile`	`{parameter:nonfile}`	Nem `BlazorSample.styles.css`, nem `favicon.ico`	Igen

Figyelmeztetés

Az URL-címet ellenőrző és CLR-típussá (például int vagy DateTime) konvertált útvonalkorlátozások mindig az invariáns kultúrát használják. Ezek a korlátozások feltételezik, hogy az URL-cím nem honosítható.

Az útvonalkorlátozások választható paraméterekkel is működnek. Az alábbi példában Id szükséges, de Option egy nem kötelező logikai útvonalparaméter.

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; }
}

A fájlrögzítés elkerülése útvonalparaméterben

Az alábbi útvonalsablon véletlenül rögzíti a statikus objektum elérési útját az opcionális útvonalparaméterben (Optional). A rendszer például rögzíti az alkalmazás stíluslapját (.styles.css), amely megszakítja az alkalmazás stílusát:

@page "/{optional?}"

...

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

Ha egy útvonalparamétert fájlon kívüli útvonalak rögzítésére szeretne korlátozni, használja a :nonfile korlátozási az útvonalsablonban:

@page "/{optional:nonfile?}"

Útválasztás pontokat tartalmazó URL-címekkel

Egy kiszolgálóoldali alapértelmezett útvonalsablon feltételezi, hogy ha a kérelem URL-címének utolsó szegmense tartalmaz egy pontot (.), akkor egy fájlt kérnek. A relatív URL-/example/some.thing például az útválasztó egy some.thingnevű fájl kéréseként értelmezi. További konfiguráció nélkül az alkalmazás egy 404 – Nem található választ ad vissza, ha some.thing egy @page irányelvvel rendelkező összetevőhöz való átirányításra szolgál, és some.thing egy útvonalparaméter-érték. Ha egy útvonalat egy vagy több ponttal rendelkező paraméterrel szeretne használni, az alkalmazásnak egyéni sablonnal kell konfigurálnia az útvonalat.

Fontolja meg a következő Example összetevőt, amely az URL utolsó szegmenséből kaphat útvonalparamétert.

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; }
}

Ha engedélyezni szeretné egy üzemeltetett Server-megoldás Blazor WebAssembly alkalmazásának a kérés irányítását egy ponttal a param útvonalparaméterben, adjon hozzá egy tartalék fájlútvonal-sablont a Program fájl opcionális paraméterével:

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

Ha úgy szeretne konfigurálni egy Blazor Server alkalmazást, hogy a kérést a param útvonalparaméter egyik pontjával irányítsa, adjon hozzá egy tartalékoldal-útvonalsablont az opcionális paraméterrel a Program fájlban:

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

További információkért lásd: Útválasztás az ASP.NET Core-ban.

Startup.cs:

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

Ha úgy szeretne konfigurálni egy Blazor Server alkalmazást, hogy a kérést egy pontot tartalmazó param útvonalparaméteren keresztül irányíthassa, adjon hozzá egy tartalék útvonalsablont az opcionális paraméterrel a Startup.Configure-ben.

Startup.cs:

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

További információkért lásd: Útválasztás az ASP.NET Core-ban.

Mindenre kiterjedő útvonalparaméterek

Az összetevők támogatják az univerzális útvonalparamétereket, amelyek több mappahatáron keresztül rögzítik az útvonalakat.

A mindent lefedő útvonalparaméterek a következők:

Az útvonalszegmens nevének megfelelő névvel elnevezve. A név nem érzékeny a kis- és nagybetűkre.
string típus. A keretrendszer nem biztosít automatikus öntést.
Az URL-cím végén.

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; }
}

A /catch-all/this/is/a/testútvonalsablont tartalmazó URL-/catch-all/{*pageRoute} esetén a PageRoute értéke this/is/a/test.

A rögzített elérési út perjeleit és szegmenseit dekódolják. A /catch-all/{*pageRoute}útvonalsablonja esetén a /catch-all/this/is/a%2Ftest%2A URL-cím this/is/a/test*eredményez.

Az NavigationManager használatával kezelheti az URI-kat és a navigációt C#-kódban. NavigationManager az alábbi táblázatban látható eseményt és metódusokat tartalmazza.

Tag	Leírás
Uri	Lekéri az aktuális abszolút URI-t.
BaseUri	Az alap URI-t (záró perjellel) adja meg, amely előre fűzhető a relatív URI-útvonalakhoz, így abszolút URI hozható létre. A BaseUri általában a dokumentum `href` elemének `<base>` attribútumának felel meg (`<head>` tartalom helye).
NavigateTo	A megadott URI-ra lép. Ha `forceLoadfalse`: A továbbfejlesztett navigáció pedig az aktuális URL-címen érhető el, Blazortovábbfejlesztett navigációja aktiválva van. Ellenkező esetben Blazor teljes oldalú újratöltést hajt végre a kért URL-címhez. Ha `forceLoadtrue`: Az ügyféloldali útválasztás megkerülésre került. A böngészőnek be kell töltenie az új lapot a kiszolgálóról, függetlenül attól, hogy az URI-t általában az ügyféloldali interaktív útválasztó kezeli-e. További információ: Továbbfejlesztett navigáció és űrlapkezelés szakasz. Ha `replace` értéke `true`, akkor a böngészőelőzmények aktuális URI-ját a rendszer lecseréli, ahelyett, hogy új URI-t helyezne az előzményverembe.
LocationChanged	Olyan esemény, amely a navigációs hely módosításakor aktiválódik. A további információkat lásd a Helymódosítások szakaszban.
`NotFound`	Olyan forgatókönyvek kezelésére van meghívva, ahol a kért erőforrás nem található. További információkért tekintse meg a Nem található válaszok szakaszt .
ToAbsoluteUri	A relatív URI-t abszolút URI-vá alakítja át.
ToBaseRelativePath	Az alkalmazás alap URI-jának előtagjához képest egy abszolút URI-t az alap URI-hoz viszonyított URI-vá alakítja. Példa: lásd a(z) URI létrehozása az alap URI előtagjához viszonyítva szakaszt.
`RegisterLocationChangingHandler`	Regisztrál egy kezelőt a bejövő navigációs események feldolgozásához. A NavigateTo hívása mindig meghívja a kezelőt.
GetUriWithQueryParameter	A NavigationManager.Uri egyetlen hozzáadott, frissített vagy eltávolított paraméterrel történő frissítésével létrehozott URI-t ad vissza. További információ: Lekérdezési sztringek szakasz.

Tag	Leírás
Uri	Lekéri az aktuális abszolút URI-t.
BaseUri	Az alap URI-t (záró perjellel) adja meg, amely előre fűzhető a relatív URI-útvonalakhoz, így abszolút URI hozható létre. A BaseUri általában a dokumentum `href` elemének `<base>` attribútumának felel meg (`<head>` tartalom helye).
NavigateTo	A megadott URI-ra lép. Ha `forceLoadfalse`: A továbbfejlesztett navigáció pedig az aktuális URL-címen érhető el, Blazortovábbfejlesztett navigációja aktiválva van. Ellenkező esetben Blazor teljes oldalú újratöltést hajt végre a kért URL-címhez. Ha `forceLoadtrue`: Az ügyféloldali útválasztás megkerülésre került. A böngészőnek be kell töltenie az új lapot a kiszolgálóról, függetlenül attól, hogy az URI-t általában az ügyféloldali interaktív útválasztó kezeli-e. További információ: Továbbfejlesztett navigáció és űrlapkezelés szakasz. Ha `replace` értéke `true`, akkor a böngészőelőzmények aktuális URI-ját a rendszer lecseréli, ahelyett, hogy új URI-t helyezne az előzményverembe.
LocationChanged	Olyan esemény, amely a navigációs hely módosításakor aktiválódik. A további információkat lásd a Helymódosítások szakaszban.
ToAbsoluteUri	A relatív URI-t abszolút URI-vá alakítja át.
ToBaseRelativePath	Az alkalmazás alap URI-jának előtagjához képest egy abszolút URI-t az alap URI-hoz viszonyított URI-vá alakítja. Példa: lásd a(z) URI létrehozása az alap URI előtagjához viszonyítva szakaszt.
`RegisterLocationChangingHandler`	Regisztrál egy kezelőt a bejövő navigációs események feldolgozásához. A NavigateTo hívása mindig meghívja a kezelőt.
GetUriWithQueryParameter	A NavigationManager.Uri egyetlen hozzáadott, frissített vagy eltávolított paraméterrel történő frissítésével létrehozott URI-t ad vissza. További információ: Lekérdezési sztringek szakasz.

Tag	Leírás
Uri	Lekéri az aktuális abszolút URI-t.
BaseUri	Az alap URI-t (záró perjellel) adja meg, amely előre fűzhető a relatív URI-útvonalakhoz, így abszolút URI hozható létre. A BaseUri általában a dokumentum `href` elemének `<base>` attribútumának felel meg (`<head>` tartalom helye).
NavigateTo	A megadott URI-ra lép. Ha `forceLoadtrue`: Az ügyféloldali útválasztás megkerülésre került. A böngészőnek be kell töltenie az új lapot a kiszolgálóról, függetlenül attól, hogy az URI-t általában az ügyféloldali útválasztó kezeli-e. Ha `replace` értéke `true`, akkor a böngészőelőzmények aktuális URI-ját a rendszer lecseréli, ahelyett, hogy új URI-t helyezne az előzményverembe.
LocationChanged	Olyan esemény, amely a navigációs hely módosításakor aktiválódik. A további információkat lásd a Helymódosítások szakaszban.
ToAbsoluteUri	A relatív URI-t abszolút URI-vá alakítja át.
ToBaseRelativePath	Az alkalmazás alap URI-jának előtagjához képest egy abszolút URI-t az alap URI-hoz viszonyított URI-vá alakítja. Példa: lásd a(z) URI létrehozása az alap URI előtagjához viszonyítva szakaszt.
`RegisterLocationChangingHandler`	Regisztrál egy kezelőt a bejövő navigációs események feldolgozásához. A NavigateTo hívása mindig meghívja a kezelőt.
GetUriWithQueryParameter	A NavigationManager.Uri egyetlen hozzáadott, frissített vagy eltávolított paraméterrel történő frissítésével létrehozott URI-t ad vissza. További információ: Lekérdezési sztringek szakasz.

Tag	Leírás
Uri	Lekéri az aktuális abszolút URI-t.
BaseUri	Az alap URI-t (záró perjellel) adja meg, amely előre fűzhető a relatív URI-útvonalakhoz, így abszolút URI hozható létre. A BaseUri általában a dokumentum `href` elemének `<base>` attribútumának felel meg (`<head>` tartalom helye).
NavigateTo	A megadott URI-ra lép. Ha `forceLoadtrue`: Az ügyféloldali útválasztás megkerülésre került. A böngészőnek be kell töltenie az új lapot a kiszolgálóról, függetlenül attól, hogy az URI-t általában az ügyféloldali útválasztó kezeli-e. Ha `replace` értéke `true`, akkor a böngészőelőzmények aktuális URI-ját a rendszer lecseréli, ahelyett, hogy új URI-t helyezne az előzményverembe.
LocationChanged	Olyan esemény, amely a navigációs hely módosításakor aktiválódik. A további információkat lásd a Helymódosítások szakaszban.
ToAbsoluteUri	A relatív URI-t abszolút URI-vá alakítja át.
ToBaseRelativePath	Az alkalmazás alap URI-jának előtagjához képest egy abszolút URI-t az alap URI-hoz viszonyított URI-vá alakítja. Példa: lásd a(z) URI létrehozása az alap URI előtagjához viszonyítva szakaszt.
GetUriWithQueryParameter	A NavigationManager.Uri egyetlen hozzáadott, frissített vagy eltávolított paraméterrel történő frissítésével létrehozott URI-t ad vissza. További információ: Lekérdezési sztringek szakasz.

Tag	Leírás
Uri	Lekéri az aktuális abszolút URI-t.
BaseUri	Az alap URI-t (záró perjellel) adja meg, amely előre fűzhető a relatív URI-útvonalakhoz, így abszolút URI hozható létre. A BaseUri általában a dokumentum `href` elemének `<base>` attribútumának felel meg (`<head>` tartalom helye).
NavigateTo	A megadott URI-ra lép. Ha `forceLoadtrue`: Az ügyféloldali útválasztás megkerülésre került. A böngészőnek be kell töltenie az új lapot a kiszolgálóról, függetlenül attól, hogy az URI-t általában az ügyféloldali útválasztó kezeli-e.
LocationChanged	Olyan esemény, amely a navigációs hely módosításakor aktiválódik.
ToAbsoluteUri	A relatív URI-t abszolút URI-vá alakítja át.
ToBaseRelativePath	Az alkalmazás alap URI-jának előtagjához képest egy abszolút URI-t az alap URI-hoz viszonyított URI-vá alakítja. Példa: lásd a(z) URI létrehozása az alap URI előtagjához viszonyítva szakaszt.

Helyváltozások

Az LocationChanged eseményhez LocationChangedEventArgs a következő információkat adja meg a navigációs eseményekről:

Location: Az új hely URL-címe.
IsNavigationIntercepted: Ha true, Blazor elfogta a navigációt a böngészőből. Ha a falsevagy a NavigationManager.NavigateTo okozta a navigációt.

A következő összetevő:

Az alkalmazás Counter összetevőjére (Counter.razor) navigál, amikor a gombot a NavigateTohasználatával kiválasztja.
A helyváltoztatási eseményt úgy kezeli, hogy feliratkozik a NavigationManager.LocationChanged-ra.
- A HandleLocationChanged metódus lecsatlakozik, amikor a keretrendszer meghívja Dispose. A metódus leválasztása lehetővé teszi az összetevő szemétgyűjtését.
- A naplózó implementációja a következő adatokat naplózza a gomb kiválasztásakor:
  
  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;
    }
}

További információkért az összetevő ártalmatlanításáról, lásd a ASP.NET Core Razor összetevő ártalmatlanításirészt.

A statikus kiszolgálóoldali renderelés (statikus SSR) NavigationManager során történő átirányításhoz a keretrendszer által rögzített parancsot kell dobni NavigationException , amely átirányítássá alakítja a hibát. A hívás NavigateTo meghívása után létező kód. A Visual Studio használatakor a hibakereső megszakítja a kivételt, ezért a Hibakeresés jelölőnégyzetének jelölését meg kell szakítania , ha ezt a kivételtípust felhasználó kezeli a Visual Studio felhasználói felületén, így elkerülhető, hogy a hibakereső leálljon a jövőbeli átirányítások esetében.

Az alkalmazás projektfájljában beállított <BlazorDisableThrowNavigationException> MSBuild tulajdonságot használhatjatrue, hogy a továbbiakban ne dobjon egy NavigationException. Emellett a hívás utáni kód akkor is végrehajtja a kódot NavigateTo , ha korábban még nem futott volna. Ez a viselkedés alapértelmezés szerint engedélyezve van a .NET 10 vagy újabb Blazor Web App projektsablonban:

<BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>

Jegyzet

A .NET 10-ben vagy újabb verziókban az MSBuild tulajdonságnak az NavigationException alkalmazás projektfájljában való beállításával engedélyezheti, hogy ne dobjon.<BlazorDisableThrowNavigationException>true Az új MSBuild tulajdonság és viselkedés kihasználásához frissítse az alkalmazást .NET 10 vagy újabb verzióra.

Nem található válaszok

NavigationManager NotFound olyan forgatókönyvek kezelésére szolgál, ahol a kért erőforrás nem található a statikus kiszolgálóoldali renderelés (statikus SSR) vagy a globális interaktív renderelés során:

Statikus SSR: A hívás NotFound a HTTP-állapotkódot 404-re állítja.
Interaktív renderelés: Jelzi az Blazor útválasztót (Router összetevőt) a Nem található tartalom megjelenítéséhez.
Streamelési renderelés: Ha a továbbfejlesztett navigáció aktív, a streamelési renderelés nem található tartalmat jelenít meg a lap újrabetöltése nélkül. Ha a továbbfejlesztett navigáció le van tiltva, a keretrendszer egy oldalfrissítéssel átirányítja a Nem található tartalomra.

Jegyzet

Az alábbi vitafórum megemlíti, hogy egy Nem található Razor összetevő rendelhető hozzá az Router összetevő paraméteréhez NotFoundPage . A paraméter együttműködik a NavigationManager.NotFound elemmel, és a szakasz későbbi részében részletesebben ismertetjük.

A streamelési renderelés csak olyan összetevőket képes megjeleníteni, amelyek útvonallal rendelkeznek, mint például egy NotFoundPage hozzárendelés (NotFoundPage="...") vagy egy állapotkódlapok újrafuttatását kezelő köztes réteg lap-hozzárendelés (UseStatusCodePagesWithReExecute). DefaultNotFound A 404-es tartalom ("Not found" egyszerű szöveg) nem rendelkezik útvonalsal, így a streamelés renderelése során nem használható.

Jegyzet

A Nem található renderelési töredék (<NotFound>...</NotFound>) nem támogatott a .NET 10-ben vagy újabb verzióiban.

NavigationManager.NotFound A tartalommegjelenítés a következőket használja, függetlenül attól, hogy a válasz elindult-e vagy sem (sorrendben):

Ha NotFoundEventArgs.Path be van állítva, renderelje a hozzárendelt oldal tartalmát.
Ha Router.NotFoundPage be van állítva, renderelje a hozzárendelt lapot.
Ha konfigurálva van, egy állapotkód-oldalakat újrafuttató köztes szoftver oldala.
Nincs művelet, ha az előző megközelítések egyike sem kerül elfogadásra.

Az állapotkódlapok újrafuttatását végző köztes szoftver elsőbbséget élvez a böngészőalapú címútválasztási problémáknál, például a böngésző címsorába beírt helytelen URL-címnél, vagy olyan hivatkozás kiválasztásakor, amelynek nincs végpontja az alkalmazásban.UseStatusCodePagesWithReExecute

Amikor egy összetevő statikusan (statikus SSR) megjelenik, és NavigationManager.NotFound meghívásra kerül, a 404 állapotkód beállításra kerül a válaszban.

@page "/render-not-found-ssr"
@inject NavigationManager Navigation

@code {
    protected override void OnInitialized()
    {
        Navigation.NotFound();
    }
}

Ha nem található tartalmat szeretne biztosítani a globális interaktív rendereléshez, használjon egy Nem található lapot (Razor összetevőt).

Jegyzet

A Blazor projektsablon alapértelmezés szerint tartalmaz egy NotFound.razor lapot. Ez a lap automatikusan renderel, amikor NavigationManager.NotFound meghívásra kerül, így egységes felhasználói élményt nyújtva könnyebben kezelhetők a hiányzó útvonalak.

NotFound.razor:

<h1>Not Found</h1>

<p>Sorry! Nothing to show.</p>

Rendelje hozzá az NotFound összetevőt az NotFoundPage útválasztó paraméteréhez. NotFoundPage Támogatja az útválasztást, amely az Állapotkódlapok újrafuttatása köztes szoftveren keresztül használható, beleértve a nem köztesBlazor szoftvereket is. Ha a NotFound renderelési töredék (<NotFound>...</NotFound>) együtt NotFoundPagevan definiálva, a lap prioritása magasabb.

Az alábbi példában az előző NotFound összetevő jelen van az alkalmazás mappájában Pages , és átadja a NotFoundPage paraméternek:

<Router AppAssembly="@typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

Amikor egy összetevő globális interaktív renderelési módban jelenik meg, a NotFound hívása jelzi a Blazor útválasztónak, hogy renderelje a NotFound összetevőt.

@page "/render-not-found-interactive"
@inject NavigationManager Navigation

@if (RendererInfo.IsInteractive)
{
    <button @onclick="TriggerNotFound">Trigger Not Found</button>
}

@code {
    private void TriggerNotFound()
    {
        Navigation.NotFound();
    }
}

Amikor meghívásra kerül a OnNotFound, az értesítésekhez használhatja a NotFound eseményt. Az esemény csak akkor aktiválódik, amikor NotFound meghívásra kerül, nem bármilyen 404-es válasz esetén. Például, ha HttpContextAccessor.HttpContext.Response.StatusCode-t 404-ra állítja, az nem aktiválja NotFound/OnNotFound.

Az egyéni útválasztót implementáló alkalmazások is használhatják a NavigationManager.NotFound-t. Az egyéni útválasztó két forrásból is megjelenítheti a Nem található tartalmat a válasz állapotától függően:

A válasz állapotától függetlenül a lap újra végrehajtási útvonalát használhatjuk, ha átadjuk azt a UseStatusCodePagesWithReExecute-nak.
```
app.UseStatusCodePagesWithReExecute(
    "/not-found", createScopeForStatusCodePages: true);
```

Amikor a válasz elindult, a NotFoundEventArgs.Path használható az útválasztóra való feliratkozáshoz OnNotFoundEvent:

@code {
    [CascadingParameter]
    private HttpContext? HttpContext { get; set; }

    private void OnNotFoundEvent(object sender, NotFoundEventArgs e)
    {
        // Only execute the logic if HTTP response has started,
        // because setting NotFoundEventArgs.Path blocks re-execution
        if (HttpContext?.Response.HasStarted == false)
        {
            return;
        }

        var type = typeof(CustomNotFoundPage);
        var routeAttributes = type.GetCustomAttributes<RouteAttribute>(inherit: true);

        if (routeAttributes.Length == 0)
        {
            throw new InvalidOperationException($"The type {type.FullName} " +
                $"doesn't have a {nameof(RouteAttribute)} applied.");
        }

        var routeAttribute = (RouteAttribute)routeAttributes[0];

        if (routeAttribute.Template != null)
        {
            e.Path = routeAttribute.Template;
        }
    }
}

A következő példaösszetevőkben:

A NotFoundContext szolgáltatás be van injektálva, akárcsak a NavigationManager.
OnInitializedAsync Ebben HandleNotFoundaz esetben egy eseménykezelő van hozzárendelve az OnNotFound eseményhez. HandleNotFound hívja meg NotFoundContext.UpdateContext-t, hogy beállítsa a fejlécet és az üzenetet a Nem található tartalom számára, amelyet a Router komponens jelenít meg a Routes komponensen belül (Routes.razor).
Az összetevők általában egy útvonalparaméter azonosítóját használják egy film vagy felhasználó adattárból, például adatbázisból való lekéréséhez. Az alábbi példákban egyetlen entitást sem ad vissza (null) annak szimulálásához, hogy mi történik, ha egy entitás nem található.
Amikor nem ad vissza entitást OnInitializedAsync, akkor a NavigationManager.NotFound meghívása következik, ami viszont aktiválja az OnNotFound eseményt és az HandleNotFound eseménykezelőt. A nem található tartalmat az útválasztó jeleníti meg.
A HandleNotFound metódus nincs rákapcsolva az összetevők ártalmatlanítására a következő helyen IDisposable.Dispose: .

Movie összetevő (Movie.razor):

@page "/movie/{Id:int}"
@implements IDisposable
@inject NavigationManager NavigationManager
@inject NotFoundContext NotFoundContext

<div>
    No matter what ID is used, no matching movie is returned
    from the call to GetMovie().
</div>

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

    protected override async Task OnInitializedAsync()
    {
        NavigationManager.OnNotFound += HandleNotFound;

        var movie = await GetMovie(Id);

        if (movie == null)
        {
            NavigationManager.NotFound();
        }
    }

    private void HandleNotFound(object? sender, NotFoundEventArgs e)
    {
        NotFoundContext.UpdateContext("Movie Not Found",
            "Sorry! The requested movie wasn't found.");
    }

    private async Task<MovieItem[]?> GetMovie(int id)
    {
        // Simulate no movie with matching id found
        return await Task.FromResult<MovieItem[]?>(null);
    }

    void IDisposable.Dispose()
    {
        NavigationManager.OnNotFound -= HandleNotFound;
    }

    public class MovieItem
    {
        public int Id { get; set; }
        public string? Title { get; set; }
    }
}

User összetevő (User.razor):

@page "/user/{Id:int}"
@implements IDisposable
@inject NavigationManager NavigationManager
@inject NotFoundContext NotFoundContext

<div>
    No matter what ID is used, no matching user is returned
    from the call to GetUser().
</div>

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

    protected override async Task OnInitializedAsync()
    {
        NavigationManager.OnNotFound += HandleNotFound;

        var user = await GetUser(Id);

        if (user == null)
        {
            NavigationManager.NotFound();
        }
    }

    private void HandleNotFound(object? sender, NotFoundEventArgs e)
    {
        NotFoundContext.UpdateContext("User Not Found",
            "Sorry! The requested user wasn't found.");
    }

    private async Task<UserItem[]?> GetUser(int id)
    {
        // Simulate no user with matching id found
        return await Task.FromResult<UserItem[]?>(null);
    }

    void IDisposable.Dispose()
    {
        NavigationManager.OnNotFound -= HandleNotFound;
    }

    public class UserItem
    {
        public int Id { get; set; }
        public string? Name { get; set; }
    }
}

Ha egy tesztalkalmazással szeretné elérni a megelőző összetevőket egy helyi bemutatóban, hozzon létre bejegyzéseket az NavMenu összetevőben, hogy elérje a NavMenu.razor és Movie összetevőket. Az útvonalparamétereként átadott entitásazonosítók az alábbi példában olyan tesztértékek, amelyeknek nincs hatásuk, mivel az összetevők valójában nem használják őket, és azt szimulálják, hogy nem találnak filmet vagy felhasználót.

In NavMenu.razor:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="movie/1">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Movie
    </NavLink>
</div>

<div class="nav-item px-3">
    <NavLink class="nav-link" href="user/2">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> User
    </NavLink>
</div>

Ez a szakasz a Blazor Web Apps. szól.

Blazor Web Appkét útválasztási típusra képesek az oldalnavigációhoz és az űrlapkezelési kérelmekhez:

Normál navigáció (dokumentumközi navigáció): a kérelem URL-címéhez egy teljes oldalnyi újratöltés aktiválódik.
Továbbfejlesztett navigáció (ugyanazzal a dokumentumalapú navigációval): Blazor elfogja a kérést, és ehelyett egy fetch kérést hajt végre. Blazor ezután foltozza be a válasz tartalmát a lap DOM-jába. Blazortovábbfejlesztett navigációja és űrlapkezelése elkerüli a teljes oldal újrabetöltését, és megőrzi az oldal állapotának nagyobb részét, így az oldalak gyorsabban töltődnek be, általában anélkül, hogy elveszítené a felhasználó görgetési pozícióját az oldalon.

Továbbfejlesztett navigáció akkor érhető el, ha:

A Blazor Web App szkriptet (blazor.web.js) használja a rendszer, nem a Blazor Server szkriptet (blazor.server.js) vagy Blazor WebAssembly szkriptet (blazor.webassembly.js).
A funkció nem explicit módon le van tiltva.
A cél URL-cím a belső alap URI-területen belül van (az alkalmazás alap elérési útja), és a lapra mutató hivatkozás nem rendelkezik az data-enhance-nav attribútummal false.

Ha engedélyezve van a kiszolgálóoldali útválasztás és a továbbfejlesztett navigáció, helyváltoztató kezelők csak interaktív futtatókörnyezetből indított programozott navigációra lesznek meghívva. A jövőbeli kiadásokban a további navigációs típusok, például a hivatkozás követése is meghívhatják a helyváltoztató kezelőket.

Fejlett navigáció végrehajtásakor általában meghívásra kerülnek azok az eseménykezelők LocationChanged, amelyek az interaktív szerverrel és a WebAssembly futtatási környezeteivel vannak regisztrálva. Előfordulhat, hogy a helymegváltoztató feldolgozók nem fogják el a fejlett navigációt. Előfordulhat például, hogy a felhasználó átvált egy másik lapra, mielőtt egy interaktív futtatókörnyezet elérhetővé válik. Ezért fontos, hogy az alkalmazáslogika ne támaszkodjon a helyváltoztatási kezelő meghívására, mivel nincs garancia a kezelő végrehajtására.

NavigateTohívásakor:

Ha forceLoadfalse, akkor ez lesz az alapértelmezett:
- A továbbfejlesztett navigáció pedig az aktuális URL-címen érhető el, Blazortovábbfejlesztett navigációja aktiválva van.
- Ellenkező esetben Blazor teljes oldalú újratöltést hajt végre a kért URL-címhez.
Ha forceLoadtrue: Blazor teljes oldalnyi újratöltést hajt végre a kért URL-címhez, függetlenül attól, hogy elérhető-e a továbbfejlesztett navigáció.

Az aktuális lapot frissítheti a NavigationManager.Refresh(bool forceLoad = false)meghívásával, amely mindig továbbfejlesztett navigációt hajt végre, ha elérhető. Ha a továbbfejlesztett navigáció nem érhető el, Blazor teljes oldalú újratöltést hajt végre.

Navigation.Refresh();

Adja át true a forceLoad paraméternek, hogy a teljes oldal újrabetöltése mindig történjen, még akkor is, ha továbbfejlesztett navigáció érhető el:

Navigation.Refresh(true);

A továbbfejlesztett navigáció alapértelmezés szerint engedélyezve van, de hierarchikusan és hivatkozásonként vezérelhető a data-enhance-nav HTML-attribútummal.

Az alábbi példák letiltják a továbbfejlesztett navigációt:

<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>

Ha a cél nemBlazor végpont, a továbbfejlesztett navigáció nem érvényes, és az ügyféloldali JavaScript újrapróbálkozza a teljes oldal betöltését. Ez biztosítja, hogy ne legyen zavarban a keretrendszer a külső oldalakról, amit nem szabad egy meglévő oldalba integrálni.

A továbbfejlesztett űrlapkezelés engedélyezéséhez adja hozzá a Enhance paramétert EditForm űrlapokhoz, vagy a data-enhance attribútumot a HTML-űrlapokhoz (<form>):

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

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

A továbbfejlesztett űrlapkezelés nem hierarchikus, és nem halad át a gyermekűrlapokra:

Nem támogatott: Az űrlap elődelemén nem állíthat be továbbfejlesztett navigációt az űrlap továbbfejlesztett navigációjának engedélyezéséhez.

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

A továbbfejlesztett űrlapbejegyzések csak Blazor végpontokkal működnek. A továbbfejlesztett űrlap nemBlazor végpontra való közzététele hibát eredményez.

A továbbfejlesztett navigáció letiltása:

Egy EditFormesetén távolítsa el a Enhance paramétert az űrlapelemből (vagy állítsa false: Enhance="false").
HTML-<form>esetén távolítsa el a data-enhance attribútumot az űrlapelemből (vagy állítsa false: data-enhance="false").

Blazortovábbfejlesztett navigációja és űrlap-átadása visszavonhatja a DOM dinamikus módosításait, ha a frissített tartalom nem része a kiszolgáló renderelésének. Egy elem tartalmának megőrzéséhez használja a data-permanent attribútumot.

Az alábbi példában a <div> elem tartalmát egy szkript dinamikusan frissíti az oldal betöltésekor:

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

Miután Blazor elindult az ügyfélen, a enhancedload esemény használatával figyelheti a továbbfejlesztett oldalfrissítéseket. Ez lehetővé teszi a továbbfejlesztett oldalfrissítés által visszavont módosítások ismételt alkalmazását a DOM-ra.

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

Ha globálisan szeretné kikapcsolni a továbbfejlesztett navigációt és űrlapkezelést, keresse fel a ASP.NET Core Blazor indításirészt.

A továbbfejlesztett navigáció statikus kiszolgálóoldali rendereléssel (statikus SSR) különös figyelmet igényel a JavaScript beillesztésénél. További információ: ASP.NET Core Blazor JavaScript statikus kiszolgálóoldali rendereléssel (statikus SSR).

URI létrehozása az alap URI-előtag alapján

Az alkalmazás alap URI-ja alapján ToBaseRelativePath átalakít egy abszolút URI-t egy URI-vé, amely az alap URI-előtaghoz képest viszonyított.

Vegye figyelembe a következő példát:

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

Ha az alkalmazás alap URI-ja https://localhost:8000, a következő eredmények jelennek meg:

A https://localhost:8000/segment átadása inputURI egy baseRelativePath-t eredményez segment-ból.
A https://localhost:8000/segment1/segment2 átadása inputURI egy baseRelativePath-t eredményez segment1/segment2-ból.

Ha az alkalmazás alap URI-ja nem egyezik a inputURI alap URI-jával, akkor ArgumentException keletkezik.

A https://localhost:8001/segment átadása a inputURI-ben a következő kivételt eredményezi:

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

A NavigationManager a böngésző Előzmények API- használatával tartja karban az alkalmazás által végrehajtott helymódosításokhoz társított navigációs előzmények állapotát. Az előzmények állapotának fenntartása különösen hasznos külső átirányítási forgatókönyvekben, például a felhasználók külső identitásszolgáltatókkaltörténő hitelesítésénél. További információ: Navigációs beállítások szakasz.

Adja meg NavigationOptions-nak és NavigateTo-nek a következő viselkedések szabályozását:

ForceLoad: Megkerülheti az ügyféloldali útválasztást, és kényszerítheti a böngészőt az új lap kiszolgálóról való betöltésére, függetlenül attól, hogy az ügyféloldali útválasztó kezeli-e az URI-t. Az alapértelmezett érték a false.
ReplaceHistoryEntry: Cserélje le az aktuális bejegyzést az előzmények listájában. Ha false, fűzze hozzá az új bejegyzést az előzmények halmazába. Az alapértelmezett érték a false.
HistoryEntryState: Olyan állapotot lekér vagy beállít, amelyet hozzáfűzhet az előzmények bejegyzéséhez.

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

A célelőzmények bejegyzéséhez társított állapot lekéréséről a helymódosítások kezelése során a Helymódosítások kezelése/megakadályozása szakaszban talál további információt.

Lekérdezési karakterláncok

A [SupplyParameterFromQuery] attribútummal megadhatja, hogy egy összetevőparaméter a lekérdezési sztringből származik-e.

A [SupplyParameterFromQuery] attribútummal a [Parameter] attribútummal megadhatja, hogy egy routable összetevő összetevőparamétere a lekérdezési sztringből származik- e.

Jegyzet

Az összetevőparaméterek csak @page direktívával fogadhatják a lekérdezési paraméterek értékeit az útválasztható összetevőkben.

Csak az routable összetevők kapják meg közvetlenül a lekérdezési paramétereket, hogy elkerüljék a felülről lefelé történő információáramlást, és egyértelművé tegyék a paraméterfeldolgozási sorrendet mind a keretrendszer, mind az alkalmazás számára. Ez a kialakítás elkerüli a finom hibákat az alkalmazáskódban, amely egy adott paraméterfeldolgozási sorrendet feltételezve lett megírva. Szabadon definiálhat egyéni kaszkádolt paramétereket, vagy közvetlenül hozzárendelheti a normál összetevőparaméterekhez, hogy a lekérdezési paraméter értékeit nem módosítható összetevőknek adja át.

A lekérdezési sztringből kapott összetevőparaméterek a következő típusokat támogatják:

bool, DateTime, decimal, double, floatGuid, int, long, string.
Az előző típusok null értékű változatai.
Az előző típusok tömbjei, függetlenül attól, hogy nullálhatóak vagy nem nullálhatóak.

A rendszer a megfelelő kulturális invariáns formázást alkalmazza az adott típusra (CultureInfo.InvariantCulture).

Adja meg a [SupplyParameterFromQuery] attribútum Name tulajdonságát, hogy az összetevő paraméter nevétől eltérő lekérdezési paraméternevet használjon. Az alábbi példában az összetevőparaméter C# neve {COMPONENT PARAMETER NAME}. A {QUERY PARAMETER NAME} helyőrzőhöz más lekérdezési paraméternév van megadva:

Az [Parameter] tulajdonságok, az összetevőparaméter tulajdonságaitól ([SupplyParameterFromQuery]) eltérően, privatemellett public is megjelölhetők.

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

Az összetevőparaméter tulajdonságaihoz ([Parameter]) hasonlóan [SupplyParameterFromQuery] tulajdonságok mindig public tulajdonságok a .NET 6/7-ben. A .NET 8 vagy újabb verzióiban [SupplyParameterFromQuery] tulajdonságok public vagy privatejelölhetők meg.

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

Az alábbi példában /search?filter=scifi%20stars&page=3&star=LeVar%20Burton&star=Gary%20Oldman URL-lel:

A Filter tulajdonság scifi stars-re értelmeződik.
A Page tulajdonság 3-re értelmeződik.
A Stars tömb a star (Name = "star") nevű lekérdezési paraméterekből van kitöltve, és LeVar Burton és Gary Oldmanértékké oldódik fel.

Jegyzet

Az alábbi útvonalazható oldalösszetevő lekérdezési sztring paraméterei egy komponensben is működnek direktíva nélkül (például egy más Search.razor megosztott Search komponens esetében).

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; }
}

A GetUriWithQueryParameter használatával adhat hozzá, módosíthat vagy távolíthat el egy vagy több lekérdezési paramétert az aktuális URL-címen:

@inject NavigationManager Navigation

...

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

Az előző példában:

A {NAME} helyőrző adja meg a lekérdezési paraméter nevét. A {VALUE} helyőrző az értéket támogatott típusként adja meg. A támogatott típusok a szakaszban később jelennek meg.
Az aktuális URL-címmel egyenlő sztring adódik vissza egyetlen paraméterrel:
- Hozzáadva, ha a lekérdezési paraméter neve nem létezik az aktuális URL-címen.
- Frissítve a megadott értékre, ha a lekérdezési paraméter az aktuális URL-címen található.
- Eltávolítva, ha a megadott érték típusa null értékű, és az érték null.
A rendszer a megfelelő kulturális invariáns formázást alkalmazza az adott típusra (CultureInfo.InvariantCulture).
A lekérdezési paraméter neve és értéke URL-kódolású.
Az egyező lekérdezési paraméternévvel rendelkező összes érték lecserélődik, ha több ilyen típusú példány is van.

Hívja meg GetUriWithQueryParameters, hogy hozzon létre egy Uri létrehozott URI-t több paraméter hozzáadásával, frissítésével vagy eltávolításával. A keretrendszer minden egyes értékhez value?.GetType() használ az egyes lekérdezési paraméterek futtatókörnyezet-típusának meghatározásához, és kiválasztja a megfelelő kulturális invariáns formázást. A keretrendszer hibát jelez a nem támogatott típusok esetében.

@inject NavigationManager Navigation

...

Navigation.GetUriWithQueryParameters({PARAMETERS})

A {PARAMETERS} helykitöltő egy IReadOnlyDictionary<string, object>.

Adjon át egy URI-sztringet a GetUriWithQueryParameters számára annak érdekében, hogy egy megadott URI-ból új URI-t hozzon létre, több paraméter hozzáadásával, frissítésével vagy eltávolításával. A keretrendszer minden egyes értékhez value?.GetType() használ az egyes lekérdezési paraméterek futtatókörnyezet-típusának meghatározásához, és kiválasztja a megfelelő kulturális invariáns formázást. A keretrendszer hibát jelez a nem támogatott típusok esetében. A támogatott típusok a szakaszban később jelennek meg.

@inject NavigationManager Navigation

...

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

A {URI} helyőrző az URI lekérdezési lánccal vagy anélkül.
A {PARAMETERS} helykitöltő egy IReadOnlyDictionary<string, object>.

A támogatott típusok megegyeznek az útvonalkorlátozások támogatott típusaival:

bool
DateOnly
DateTime
decimal
double
float
Guid
int
long
string
TimeOnly

A támogatott típusok a következők:

Az előző típusok null értékű változatai.
Az előző típusok tömbjei, függetlenül attól, hogy nullálhatóak vagy nem nullálhatóak.

Figyelmeztetés

Az alapértelmezés szerint engedélyezett tömörítéssel ne hozzon létre biztonságos (hitelesített/engedélyezett) interaktív kiszolgálóoldali összetevőket, amelyek nem megbízható forrásokból renderelik az adatokat. A nem megbízható források közé tartoznak az útvonalparaméterek, a lekérdezési sztringek, az JS interopból származó adatok, valamint a külső felhasználók által szabályozható egyéb adatforrások (adatbázisok, külső szolgáltatások). További információért lásd az ASP.NET Core BlazorSignalR útmutatót és a Veszélyforrások elhárítási útmutatót az ASP.NET Core Blazor interaktív kiszolgálóoldali rendereléséhez.

Lekérdezési paraméter értékének cseréje, ha a paraméter létezik

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

Aktuális URL-cím	Generált URL-cím
`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`

Lekérdezési paraméter és érték hozzáfűzése, ha a paraméter nem létezik

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

Aktuális URL-cím	Generált URL-cím
`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`

Lekérdezési paraméter eltávolítása, ha a paraméter értéke `null`

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

Aktuális URL-cím	Generált URL-cím
`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/`

Lekérdezési paraméterek hozzáadása, frissítése és eltávolítása

Az alábbi példában:

name el lesz távolítva, ha van ilyen.
age hozzáadódik a 25 (int) értékkel, ha nincs jelen. Ha jelen van, age25értékre frissül.
eye color greenértékre lesz hozzáadva vagy frissítve.

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

Aktuális URL-cím	Generált URL-cím
`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`

Az enumerálási értékek támogatása

Az alábbi példában:

full name Morena Baccarin-hez van hozzáadva vagy frissítve, egyetlen értékként.
ping paraméterek hozzáadódnak vagy lecserélődnek a 35, 16, 87 és 240értékekkel.

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

Aktuális URL-cím	Generált URL-cím
`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`

Navigálás hozzáadott vagy módosított lekérdezési sztringgel

Ha hozzáadott vagy módosított lekérdezési sztringgel szeretne navigálni, adjon át egy létrehozott URL-címet a NavigateTo.

A következő példahívások:

GetUriWithQueryParameter a name lekérdezési paraméter Morena Baccarinértékkel való hozzáadásához vagy cseréjéhez.
Meghívja NavigateTo az új URL-címre való navigálás aktiválásához.

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

A kérés lekérdezési sztringje a NavigationManager.Uri tulajdonságból származik:

@inject NavigationManager Navigation

...

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

A lekérdezési sztring paramétereinek elemzéséhez az egyik módszer a URLSearchParams használata JavaScript (JS) interop:

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

További információ a JavaScript-modulokkal való elkülönítésről: JavaScript-függvények meghívása .NET-metódusokból ASP.NET Core Blazor.

Hash-alapú útválasztás nevesített elemekhez

Keresse meg az elnevezett elemet az alábbi megközelítésekkel, és adjon meg kivonatolt (#) hivatkozást az elemre. Az összetevő elemeihez és a külső összetevők elemeihez vezető útvonalak gyökér-relatív elérési utakat használnak. Az elején található perjel (/) megadása nem kötelező.

Az alábbi megközelítések mindegyikének példái bemutatják, hogyan lehet navigálni a id komponensben található, targetElementCounter rendelkező elemhez.

Horgonyelem (<a>) egyesült egy href-gyel:
```
<a href="/counter#targetElement">
```

A NavLink összetevő egy href.

<NavLink href="/counter#targetElement">

NavigationManager.NavigateTo relatív URL átadása:
```
Navigation.NavigateTo("/counter#targetElement");
```

Az alábbi példa szemlélteti a hash-alapú útválasztást egy összetevő nevesített H2 címsoraihoz és külső összetevőkhöz.

A Home (Home.razor) és Counter (Counter.razor) összetevőkben helyezze el a következő jelölést a meglévő összetevő jelölése végén, hogy navigációs célokként szolgáljon. A <div> mesterséges függőleges területet hoz létre a böngésző görgetési viselkedésének szemléltetéséhez:

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

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

Adja hozzá az alábbi HashedRouting összetevőt az alkalmazáshoz.

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");
    }
}

Felhasználói interakció `<Navigating>` tartalommal

Ha a navigálás során jelentős késés tapasztalható, például egy Blazor WebAssembly alkalmazás lusta betöltésű könyvtárait töltjük be vagy lassú hálózati kapcsolat van egy kiszolgálóoldali alkalmazással, a Blazor összetevő jelezheti a felhasználónak, hogy oldalváltás történik.

A Router összetevőt meghatározó összetevő tetején adjon hozzá egy @using irányelvet a Microsoft.AspNetCore.Components.Routing névtérhez:

@using Microsoft.AspNetCore.Components.Routing

Adjon meg tartalmat a Navigating paraméternek az oldaláttűnési események során való megjelenítéshez.

Az útválasztó elem (<Router>...</Router>) tartalma:

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

A Navigating tulajdonságot használó példáért lásd a késleltetett betöltésű szerelvényeket ASP.NET Core Blazor WebAssemblyalatt.

Aszinkron navigációs események kezelése `OnNavigateAsync`

A Router összetevő támogatja a OnNavigateAsync funkciót. A OnNavigateAsync kezelő akkor lesz meghívva, ha a felhasználó:

Első alkalommal látogat meg egy útvonalat úgy, hogy közvetlenül a böngészőben navigál hozzá.
Hivatkozással vagy NavigationManager.NavigateTo meghívással navigál egy új útvonalra.

<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)
    {
        ...
    }
}

Az OnNavigateAsynchasználatát bemutató példára lásd a ASP.NET Core Blazor WebAssemblylusta betöltésű összeállítások.

A kiszolgálón való előrendereléskor OnNavigateAsync végrehajtása kétszer:

Egyszer, amikor a kért végpont összetevő kezdetben statikusan lett megjelenítve.
Másodszor, amikor a böngésző megjeleníti a végpont összetevőjét.

A OnNavigateAsync fejlesztői kódjának kétszeri végrehajtásának megakadályozása érdekében a Routes összetevő tárolhatja a NavigationContext a OnAfterRender{Async} életciklus-metódusban, ahol firstRender ellenőrizhető. További információ: Prerendering with JavaScript interop.

A OnNavigateAsync fejlesztői kódjának kétszeri végrehajtásának megakadályozása érdekében a App összetevő tárolhatja a NavigationContext használat céljából a OnAfterRender{Async}-ban, ahol a firstRender ellenőrizhető. További információ: Prerendering with JavaScript interop.

Lemondások kezelése a `OnNavigateAsync`

A NavigationContext objektum, amelyet a OnNavigateAsync visszahívásnak adnak át, tartalmaz egy CancellationToken-t, amely beállításra kerül, amikor új navigációs esemény történik. A OnNavigateAsync visszahívásnak a megszakítási token beállításakor kivételt kell dobnia, hogy elkerülje a OnNavigateAsync visszahívás futtatását elavult navigáció esetén.

Ha egy felhasználó egy végpontra navigál, de azonnal egy új végpontra navigál, az alkalmazásnak nem szabad folytatnia az első végpont OnNavigateAsync visszahívását.

Az alábbi példában:

A lemondási token a PostAsJsonAsynchívásakor van átadva, amely megszakíthatja a POST műveletet, ha a felhasználó elhagyja a /about végpontot.
A megszakítási token be van állítva egy termékelőtöltési művelet során, ha a felhasználó ellép a /store végponttól.

@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);
            }
        }
    }
}

Jegyzet

Ha a NavigationContext megszakítási token megszakad, és nem dobunk kivételt, az nem szándékos viselkedést eredményezhet, például egy összetevő megjelenítését egy korábbi navigációból.

Helymódosítások kezelése/megakadályozása

RegisterLocationChangingHandler regisztrál egy kezelőt a bejövő navigációs események feldolgozásához. A kezelő LocationChangingContext által biztosított környezete a következő tulajdonságokat tartalmazza:

TargetLocation: Lekéri a célpont helyét.
HistoryEntryState: Lekéri a célzott előzménybejegyzéshez társított állapotot.
IsNavigationIntercepted: Megállapítja, hogy a navigáció egy hivatkozásról lett-e átirányítva.
CancellationToken: Lekéri a CancellationToken annak megállapításához, hogy a navigáció megszakadt-e, például annak megállapításához, hogy a felhasználó egy másik navigációt aktivált-e.
PreventNavigation: A navigáció folytatásának megakadályozása érdekében hívható meg.

Az összetevők több helyváltozó kezelőt is regisztrálhatnak az OnAfterRender{Async} életciklus-metódusban. A navigáció meghívja a teljes alkalmazásban (több összetevőre) regisztrált helyváltozó kezelőket, és minden belső navigáció párhuzamosan hajtja végre őket. A rendszer a NavigateTo kezelők mellett a következő műveleteket is meghívja:

Belső hivatkozások kiválasztásakor, amelyek az alkalmazás alapútvonala alatti URL-címekre mutató hivatkozások.
Ha a böngészőben az előre és vissza gombokkal navigál.

A kezelők csak az alkalmazáson belüli navigációhoz lesznek végrehajtva. Ha a felhasználó kiválaszt egy hivatkozást, amely egy másik webhelyre navigál, vagy manuálisan módosítja a címsort egy másik helyre, a helyváltoztatók nem lesznek végrehajtva.

Hajtsa végre a IDisposable-t, és szüntesse meg a regisztrált kezelők regisztrációját az eltávolításukkal. További információért lásd: ASP.NET Core Razor összetevő eltávolítása.

Fontos

Ne kísérelje meg a DOM-karbantartási feladatok végrehajtását JavaScript (JS) interop használatával a helyváltozások kezelésekor. Használja a(z) MutationObserver ügyfélen a . További információ: ASP.NET Core Blazor JavaScript-együttműködés (JS interop).

Az alábbi példában egy helyváltozó kezelő regisztrálva van a navigációs eseményekhez.

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();
}

Mivel a belső navigáció aszinkron módon megszakítható, több egymást átfedő hívás is előfordulhat a regisztrált kezelők felé. Például több kezelőhívás is előfordulhat, ha a felhasználó gyorsan kiválasztja a vissza gombot egy oldalon, vagy több hivatkozást jelöl ki a navigáció végrehajtása előtt. Az alábbiakban összefoglaljuk az aszinkron navigációs logikát:

Ha a helyváltó kezelők regisztrálva vannak, a rendszer először visszaállítja az összes navigációt, majd visszajátssza, ha a navigáció nincs megszakítva.
Ha átfedésben vannak a navigációs kérések, a legújabb kérés mindig megszakítja a korábbi kéréseket, ami a következőket jelenti:
- Az alkalmazás egyetlen kijelölésként több vissza- és továbbítási gombkijelölést is kezelhet.
- Ha a felhasználó több hivatkozást jelöl ki a navigáció befejezése előtt, az utolsó kijelölt hivatkozás határozza meg a navigációt.

A NavigationOptions NavigateTo-re való átadásával kapcsolatos további információk, amelyek a belépések és az állapot szabályozását szolgálják a navigációs előzmények veremében, lásd a Navigációs beállítások című szakaszban.

További példakódért lásd a NavigationManagerComponent a BasicTestApp (dotnet/aspnetcore referenciaforrásban).

Jegyzet

A .NET referenciaforrásra mutató dokumentációs hivatkozások általában betöltik az adattár alapértelmezett ágát, amely a .NET következő kiadásának aktuális fejlesztését jelöli. Egy adott kiadás címkéjének kiválasztásához használja az Ágak vagy címkék váltása legördülő listát. További információ: A ASP.NET Core-forráskód (dotnet/AspNetCore.Docs #26205) verziócímkéjének kiválasztása.

A NavigationLock összetevő elfogja a navigációs eseményeket mindaddig, amíg meg nem jelenik, gyakorlatilag "zárolja" az adott navigációt, amíg el nem születik a döntés a folytatásról vagy a megszakításról. Használja NavigationLock, ha a navigációs elfogás hatóköre egy összetevő élettartamára terjedhet ki.

NavigationLock paraméterek:

ConfirmExternalNavigation beállít egy böngészőablakot, amely arra kéri a felhasználót, hogy erősítse meg vagy szakítsa meg a külső navigációt. Az alapértelmezett érték a false. A megerősítést kérő párbeszédpanel megjelenítéséhez kezdeti felhasználói beavatkozás szükséges a laphoz, mielőtt külső navigációt indítana el a böngésző címsorában lévő URL-címmel. Az interakciós követelményekről további információt a Window: event (Ablak: esemény) beforeunload című témakörben talál.
OnBeforeInternalNavigation beállítja a belső navigációs események visszahívását.

Az alábbi NavLock összetevőben:

A Microsoft webhelyére mutató hivatkozás követésére tett kísérletet a felhasználónak meg kell erősítenie, mielőtt a https://www.microsoft.com való navigálás sikeres lenne.
PreventNavigation azért kerül meghívásra, hogy megakadályozza a navigációt, ha a felhasználó elutasítja a navigáció megerősítését egy JavaScript (JS) interop hívással, amely megnyitja a JSconfirm párbeszédpanelt.

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();
        }
    }
}

További példakódért lásd a ConfigurableNavigationLock (BasicTestApp referenciaforrás) dotnet/aspnetcore összetevőjét.

`NavLink` összetevő

Navigációs hivatkozások létrehozásakor használjon egy NavLink összetevőt a HTML-hivatkozáselemek (<a>) helyett. A NavLink komponens <a> elemként viselkedik, kivéve, hogy egy active CSS-osztályt vált ki, amiatt, hogy a href megegyezik-e az aktuális URL-címével. A active osztály segít a felhasználóknak megérteni, hogy melyik lap az aktív lap a megjelenített navigációs hivatkozások között. Amikor az aktuális útvonal megfelel a NavLink.ActiveClass, rendeljen hozzá egy CSS-osztálynevet a(z) href-hoz, hogy egyéni CSS-osztályt alkalmazzon a renderelt hivatkozásra.

A NavLinkMatch elem Match attribútumához két <NavLink> lehetőség rendelhető:

NavLinkMatch.All: A NavLink aktív, ha megfelel az aktuális URL-címnek, figyelmen kívül hagyva a lekérdezési sztringet és a töredéket. A lekérdezési sztring/töredék egyeztetésének hozzáadásához állítsa be a kapcsolót Microsoft.AspNetCore.Components.Routing.NavLink.EnableMatchAllForQueryStringAndFragmentAppContext értékre true.
NavLinkMatch.Prefix (alapértelmezett): A NavLink aktív, ha megfelel az aktuális URL-cím bármely előtagjának.

A NavLinkMatch elem Match attribútumához két <NavLink> lehetőség rendelhető:

NavLinkMatch.All: A NavLink akkor aktív, ha megfelel a teljes aktuális URL-címnek, beleértve a lekérdezési sztringet és a töredéket is.
NavLinkMatch.Prefix (alapértelmezett): A NavLink aktív, ha megfelel az aktuális URL-cím bármely előtagjának.

Az előző példában a HomeNavLinkhref="" megegyezik a kezdőlap URL-címével, és csak az alkalmazás alapértelmezett alapútvonalán (active) kapja meg a / CSS-osztályt. A második NavLink megkapja a active osztályt, amikor a felhasználó egy component előtaggal (például /component és /component/another-segment) felkeres egy URL-címet.

Az egyéni egyezési logika alkalmazásához hozzon létre egy alosztályt a NavLink-ból, és írja felül annak ShouldMatch metódusát. A metódusból akkor adja vissza true, amikor alkalmazni akarja a active CSS-osztályt.

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

A rendszer további NavLink összetevőattribútumokat ad át a renderelt horgonycímkének. Az alábbi példában a NavLink összetevő tartalmazza a target attribútumot:

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

A következő HTML-jelölés jelenik meg:

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

Figyelmeztetés

A Blazor gyermek tartalmak renderelésének módja miatt a NavLink ciklusban lévő for komponensek rendereléséhez helyi index változóra van szükség, ha a növekvő ciklusváltozót a NavLink (gyermek) komponens tartalmában használják.

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

Ebben a forgatókönyvben az indexváltozó használata követelmény minden olyan gyermekösszetevő számára, amely hurokváltozót használ a gyermek tartalmában, nem csak a NavLink összetevő esetében.

Alternatívaként használjon egy foreach hurkot Enumerable.Range:

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

NavLink összetevőbejegyzések dinamikusan hozhatók létre az alkalmazás összetevőiből tükröződés útján. Az alábbi példa a további testreszabás általános megközelítését mutatja be.

A következő bemutatóhoz az alkalmazás összetevőihez konzisztens, szabványos elnevezési konvenciót használunk:

A routable összetevő fájlnevei Pascal-esetet használnak† például Pages/ProductDetail.razor.
Az útvonalazható összetevőfájl elérési útjai megegyeznek a kebab-esetes URL-ekkel, az összetevő útvonalsablonjában lévő szavak között megjelenő kötőjelekkel. Például a böngészőben a relatív URL ProductDetailalatt egy /product-detail összetevőt kérnek, amelynek útvonalsablonja @page "/product-detail" (/product-detail).

†Pascal formátum (felső camel case) egy elnevezési konvenció szóközök és írásjelek nélkül, és minden szó első betűje nagybetűs, beleértve az első szót.
‡A Kebab-eset szóközök és írásjelek nélküli elnevezési konvenció, amely kisbetűket és kötőjeleket használ a szavak között.

Az alapértelmezett Razor oldal NavMenu összetevőjének (NavMenu.razor) Home jelölésében a NavLink összetevők egy gyűjteményből kerülnek hozzáadásra:

<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>

A GetRoutableComponents metódus a @code blokkban:

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);

Az előző példa nem tartalmazza a következő lapokat az összetevők renderelt listájában:

Home lap: A lap az automatikusan létrehozott hivatkozásoktól elkülönítve jelenik meg, mert a lista tetején kell megjelennie, és meg kell adnia a Match paramétert.
Error oldal: A hibás oldalt csak a keretrendszer által lehet navigálni, és nem szabad felsorolni.

Szerezze be a ,Blazor Web App vagy Blazor WebAssembly mintaalkalmazás-at, egy helyileg futtatható mintaalkalmazás előző kódjára példaként.

ASP.NET core végpont útválasztási integrációja

Ez a szakasz a Blazor Web Appáramkörön működőkre vonatkozik.

Ez a szakasz Blazor Server alkalmazásokra vonatkozik.

A Blazor Web App be van építve a ASP.NET Core végpont-útválasztásirendszerébe. Az ASP.NET Core-alkalmazás úgy van beállítva, hogy az interaktív összetevők bejövő kapcsolatait fogadja a MapRazorComponents fájlban található Program-gyel. Az alapértelmezett gyökérösszetevő (első betöltött összetevő) a App összetevő (App.razor):

app.MapRazorComponents<App>();

Blazor Server az ASP.NET Core Endpoint Routing része. Az ASP.NET Core-alkalmazás úgy van konfigurálva, hogy fogadja az interaktív összetevők bejövő kapcsolatait az MapBlazorHub fájlban található Program:

app.UseRouting();

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

Blazor Server az ASP.NET Core Endpoint Routing része. Az ASP.NET Core-alkalmazás úgy van konfigurálva, hogy fogadja az interaktív összetevők bejövő kapcsolatait a(z) MapBlazorHub-ben és Startup.Configure-ben.

A tipikus konfiguráció az összes kérés átirányítása egy Razor lapra, amely az Blazor Server alkalmazás kiszolgálóoldali részének gazdagépe. Konvenció szerint az alkalmazás mappájában a _Host.cshtml lapját általában Pages-nek nevezik.

A gazdagépfájlban megadott útvonalat tartalék útvonalnak nevezzük, mert alacsony prioritással működik az útvonal-egyeztetésben. A tartalék útvonal akkor használatos, ha más útvonalak nem egyeznek. Ez lehetővé teszi, hogy az alkalmazás más vezérlőket és lapokat használjon anélkül, hogy megzavarja az összetevők útválasztását az Blazor Server alkalmazásban.

A nem gyökérszintű URL-kiszolgáló üzemeltetésének konfigurálásával MapFallbackToPage kapcsolatos információkért lásd ASP.NET Core-alkalmazás Blazor alap elérési útját.

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-11-11

Megosztás a következőn keresztül:

Statikus és interaktív útválasztás

Navigáció közben egy elemre fókuszálj

Egyéni tartalom megadása, ha a tartalom nem található

Statikus útválasztás

Interaktív útválasztás

Útválasztás pontokat tartalmazó URL-címekkel

Mindenre kiterjedő útvonalparaméterek

A Navigation Manager átirányítási viselkedése a statikus kiszolgálóoldali renderelés során (statikus SSR)

Nem található válaszok

Továbbfejlesztett navigáció és űrlapkezelés

Navigációs előzmények állapota

Navigációs beállítások

Lekérdezési paraméter értékének cseréje, ha a paraméter létezik

Lekérdezési paraméter és érték hozzáfűzése, ha a paraméter nem létezik

Lekérdezési paraméter eltávolítása, ha a paraméter értéke `null`

Lekérdezési paraméterek hozzáadása, frissítése és eltávolítása

Az enumerálási értékek támogatása

Navigálás hozzáadott vagy módosított lekérdezési sztringgel

Hash-alapú útválasztás nevesített elemekhez

Felhasználói interakció `<Navigating>` tartalommal

Aszinkron navigációs események kezelése `OnNavigateAsync`

Lemondások kezelése a `OnNavigateAsync`

Helymódosítások kezelése/megakadályozása

Megosztás a következőn keresztül:

ASP.NET Core Blazor útválasztás és navigáció

Statikus és interaktív útválasztás

Útvonalsablonok

Navigáció közben egy elemre fókuszálj

Egyéni tartalom megadása, ha a tartalom nem található

Útvonal több szerelvényből származó komponensekhez

Statikus útválasztás

Interaktív útválasztás

Útvonalparaméterek

Útvonalkorlátozások

A fájlrögzítés elkerülése útvonalparaméterben

Útválasztás pontokat tartalmazó URL-címekkel

Mindenre kiterjedő útvonalparaméterek

URI- és navigációs állapotsegítők

Helyváltozások

A Navigation Manager átirányítási viselkedése a statikus kiszolgálóoldali renderelés során (statikus SSR)

Nem található válaszok

Továbbfejlesztett navigáció és űrlapkezelés

URI létrehozása az alap URI-előtag alapján

Navigációs előzmények állapota

Navigációs beállítások

Lekérdezési karakterláncok

Lekérdezési paraméter értékének cseréje, ha a paraméter létezik

Lekérdezési paraméter és érték hozzáfűzése, ha a paraméter nem létezik

Lekérdezési paraméter eltávolítása, ha a paraméter értéke null

Lekérdezési paraméterek hozzáadása, frissítése és eltávolítása

Az enumerálási értékek támogatása

Navigálás hozzáadott vagy módosított lekérdezési sztringgel

Hash-alapú útválasztás nevesített elemekhez

Felhasználói interakció <Navigating> tartalommal

Aszinkron navigációs események kezelése OnNavigateAsync

Lemondások kezelése a OnNavigateAsync

Helymódosítások kezelése/megakadályozása

NavLink összetevő

ASP.NET core végpont útválasztási integrációja

Visszajelzés

További források

Lekérdezési paraméter eltávolítása, ha a paraméter értéke `null`

Felhasználói interakció `<Navigating>` tartalommal

Aszinkron navigációs események kezelése `OnNavigateAsync`

Lemondások kezelése a `OnNavigateAsync`

`NavLink` összetevő