如何防止blazor中的路由

Question

我在西裝外套中創建了一個嵌套布局。

blazor 路由到其中一個導航菜單，其中還有另一個菜單。

當我單擊導航菜單時，它被路由到特定頁面，路由頁面上還有另一個菜單。

單擊該菜單會在嵌套布局中加載新路由的頁面。

但是，再次單擊最頂部的菜單會將頂部路由加載到最里面的布局中。

這是我的代碼。

MainLayout.razor：

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

導航菜單.razor：

<li class="nav-item px-3">
    <NavLink class="nav-link" href="sub">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Sub
    </NavLink>
</li>

子菜單.razor：

@page "/sub"

@layout MainLayout
@inherits LayoutComponentBase

<h3>SubLayout</h3>

<div style="width:20%">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/sub/mypage" Match="NavLinkMatch.All">
                <span class="oi oi-account-login" aria-hidden="true"></span> go to sub of sub
            </NavLink>
        </li>
    </ul>
</div>

<div style="width: 40%; height:40%; border:solid red">
    @Body
</div>

我的頁面.razor：

@page "/sub/mypage"
@layout SubLayout

<div >
    <h3>This is Mypage</h3>
</div>

這是執行結果：

為什么頂部導航菜單中的頁面加載到子布局中？ 有什么辦法可以防止這種情況嗎？

Answer 1

沒有看到您在Mypage.razor中指定的Mypage.razor我認為問題在於您嘗試使用可路由組件作為布局。 我基本上只是將這些分開。

SubMenu.razor

@page "/sub"

<SubLayout />

SubLayout.razor

通過指定@layout MainLayout注意嵌套

@layout MainLayout
@inherits LayoutComponentBase

<h3>SubLayout</h3>

<div style="width:20%">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/sub/mypage" Match="NavLinkMatch.All">
                <span class="oi oi-account-login" aria-hidden="true"></span> go to sub of sub
            </NavLink>
        </li>
    </ul>
</div>

<div style="width: 40%; height:40%; border:solid red">
    @Body
</div>

文檔在這里