具有不同布局的 vuejs 应用程序(例如登录布局、页面布局、注册等) [英] vuejs application with different layouts (e.g. login layout, page layout, signup etc.)

问题描述

我使用 vue-cli 生成了一个项目.我看到项目有一个 App.vue，它是该应用程序的主要布局 - 如果我没记错的话.这里我放了我的基本 HTML 布局和 .现在的问题是我需要完全不同的登录布局(不同的包装器，主体具有不同的类)但我无法更改它，因为 App.vue 具有作为布局有点固定"的模板.如何处理这个问题?有推荐的方法吗?

I generated a project using vue-cli. I see project has one App.vue which is kinda main layout of the app - if I'm not mistaken. Here I put my basic HTML layout and <router-view></router-view>. Now the issue is that I need completely different layout for login (different wrappers , body has different classes) but I can't change it since App.vue has template which is kinda "fixed" as a layout. How to approach this issue? Is there recommended way?

我是否应该创建代表布局的新组件，这样在这种情况下，我的 App.vue 模板将只有 </router-view> 然后 LoginLayout.vue 将是包含在其中吗?

Should I create new component that represents layout so in that case my App.vue template would only have <router-view></router-view> and then LoginLayout.vue would be included into it?

推荐答案

我想我找到了解决方案.该方法具有 App.vue 仅包含 然后包含表示布局的不同组件(如果需要，包含 和子路由).我发现了一个以这种方式使用它的项目这里.

I think I found a solution. The approach has App.vue containing only <router-view></router-view> and then including different components that represent layout (if needed, containing <router-view> and subroutes). I found a project using it in that way here.

我认为它使事情变得更加干净和有条理.恕我直言，隐藏定义布局结构的所有元素(所有 div)会太混乱 - 特别是对于较大的应用程序.

I think it keeps things more clean and organised. IMHO, hiding all elements which define layout structure (all the divs) would be too messy - especially for bigger apps.

这篇关于具有不同布局的 vuejs 应用程序(例如登录布局、页面布局、注册等)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！