如何切换 Blazor 中的主布局？

Question

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

\n

\n

但相反，我收到的是：

\n

\n

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

\n

MainLayout.razor

\n

inherits LayoutComponentBase\n\n<div class="page">\n  <div class="sidebar">\n      <NavMenu />\n  </div>\n\n  <div class="main">\n    <div class="top-row px-4">\n        <a href="/login" target="_blank" class="ml-md-auto">Login</a>\n    </div>\n    <div class="content px-4">\n        @Body\n    </div>\n  </div>\n</div>\n

\n

登录.razor

\n

@page "/login"\n<style>\n#login .container #login-row #login-column #login-box {\n    margin-top: 120px;\n    max-width: 600px;\n    height: 320px;\n    border: 1px solid #9C9C9C;\n    background-color: #EAEAEA;\n }\n\n    #login .container #login-row #login-column #login-box #login-form {\n        padding: 20px;\n    }\n\n        #login .container #login-row #login-column #login-box #login-form #register-link {\n            margin-top: -85px;\n        }\n</style>\n<div id="login">\n    <h3 class="text-center text-white pt-5">Login form</h3>\n    <div class="container">\n        <div id="login-row" class="row justify-content-center align-items-center">\n            <div id="login-column" class="col-md-6">\n                <div id="login-box" class="col-md-12">\n                    <form id="login-form" class="form" action="" method="post">\n                        <h3 class="text-center text-info">Login</h3>\n                        <div class="form-group">\n                            <label for="username" class="text-info">Username:</label><br>\n                            <input type="text" name="username" id="username" class="form-control">\n                        </div>\n                        <div class="form-group">\n                            <label for="password" class="text-info">Password:</label><br>\n                            <input type="text" name="password" id="password" class="form-control">\n                        </div>\n                        <div class="form-group">\n                            <label for="remember-me" class="text-info"><span>Remember me</span>\xc2\xa0<span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br>\n                            <input type="submit" name="submit" class="btn btn-info btn-md" value="submit">\n                        </div>\n                        <div id="register-link" class="text-right">\n                            <a href="#" class="text-info">Register here</a>\n                        </div>\n                    </form>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n\n@code {\n\n}\n

\n

Answer 1

您可以使用 @layout Razor 指令设置为登录组件顶部的 EmptyLayout

@layout EmptyLayout

    **... you componant..**

空布局示例

    @inherits LayoutComponentBase

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