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

vue.js Vue.js

乐米亚

2020-03-11

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

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

第621篇《具有不同布局(例如登录布局,页面布局,注册等)的vuejs应用程序》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
乐猪猪 2020.03.11

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

猴子Itachi 2020.03.11

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

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

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

路易Stafan 2020.03.11

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android