Блог

Я создаю вложенный макет в blazer.

blazor перенаправляет в одно из меню навигации, и в нем есть другое меню.

Когда я нажимаю меню навигации, оно перенаправляется на определенную страницу, на маршрутизируемой странице есть другое меню.

Щелчок по этому меню загружает новую маршрутизируемую страницу во вложенном макете.

Однако при повторном нажатии на самое верхнее меню верхний маршрут загружается в самый внутренний макет.

Вот мой код.

mainLayout.razor:

 @inherits LayoutComponentBase

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

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

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

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

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

Mypage.razor:

 @page "/sub/mypage"
@layout SubLayout

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

Это результат выполнения:

Почему страница в верхнем меню навигации загружается в подпроцесс? Есть ли какой-либо способ предотвратить это?

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>
  

Документы здесь