blazor - 如何在 Blazor 中切换主布局？

Question

当用户按下包含登录的左上链接的登录链接时，我试图将其存档:

但相反，我收到了这个:

换句话说:我想转到一个没有主布局导航栏的页面。如何存档？

MainLayout.razor

inherits LayoutComponentBase

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

  <div class="main">
    <div class="top-row px-4">
        <a href="/login" target="_blank" class="ml-md-auto">Login</a>
    </div>
    <div class="content px-4">
        @Body
    </div>
  </div>
</div>

Login.razor

@page "/login"
<style>
#login .container #login-row #login-column #login-box {
    margin-top: 120px;
    max-width: 600px;
    height: 320px;
    border: 1px solid #9C9C9C;
    background-color: #EAEAEA;
 }

    #login .container #login-row #login-column #login-box #login-form {
        padding: 20px;
    }

        #login .container #login-row #login-column #login-box #login-form #register-link {
            margin-top: -85px;
        }
</style>
<div id="login">
    <h3 class="text-center text-white pt-5">Login form</h3>
    <div class="container">
        <div id="login-row" class="row justify-content-center align-items-center">
            <div id="login-column" class="col-md-6">
                <div id="login-box" class="col-md-12">
                    <form id="login-form" class="form" action="" method="post">
                        <h3 class="text-center text-info">Login</h3>
                        <div class="form-group">
                            <label for="username" class="text-info">Username:</label><br>
                            <input type="text" name="username" id="username" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="password" class="text-info">Password:</label><br>
                            <input type="text" name="password" id="password" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="remember-me" class="text-info"><span>Remember me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br>
                            <input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
                        </div>
                        <div id="register-link" class="text-right">
                            <a href="#" class="text-info">Register here</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


@code {

}

Answer 1

您可以在登录组件顶部使用@layout Razor 指令设置为空布局

@layout EmptyLayout

    **... you componant..**

空布局示例

    @inherits LayoutComponentBase

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