具有不同布局(例如登录布局,页面布局,注册等)的vuejs应用程序

用户名 · 03月11日

我使用vue-cli生成了一个项目。我看到项目有一个App.vue,这是该应用程序的主要布局-如果我没记错的话。在这里,我放置了基本的HTML布局和<router-view></router-view>现在的问题是,我需要用于登录的布局完全不同(不同的包装器,主体具有不同的类),但是我无法更改它,因为App.vue的模板已“固定”为布局。如何解决这个问题?有推荐的方法吗?

我是否应该创建表示布局的新组件,以便在这种情况下,我的App.vue模板仅包含该组件,<router-view></router-view>然后将LoginLayout.vue包含在其中?

回答(3)
时间
蒂亚戈·马托斯(Tiago Matos)
3 · 2020-03-11 11:49:46

我知道它很旧,但是现在nuxt.js支持布局。看一看。

卢克佩普
2 · 2020-03-11 11:49:46

我不知道任何“推荐方式”,但我的应用程序的结构如下:

App.vue-仅顶部菜单栏(用户未通过身份验证时不会呈现)和<router-view></router-view>每个组件(页面)

因此,每个页面都可以具有完全不同的布局。

纳撒尼尔·福特用户名
1 · 2020-03-11 11:49:46

我想我找到了解决方案。该方法App.vue只包含<router-view></router-view>然后包含代表布局的不同组件(如果需要,包含<router-view>和子路由)。我在这里找到了一个以这种方式使用它的项目

我认为这可以使事情更加整洁有序。恕我直言,隐藏所有定义布局结构的元素(所有div)会太乱了-特别是对于较大的应用程序。

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序