vue.js结构应用程序布局

我希望使用Holy Grail layout构建我的web应用程序，只有一个侧栏，没有页脚。根据当前选择的链接，侧边栏将用作导航栏，并用于保存将显示在布局中心的内容的交互选项。这意味着，在导航栏中选择要导航到的链接时，它会影响侧栏中显示的用于自定义交互选项的内容以及中心的主要内容。vue.js结构应用程序布局

方法1：

为了实现这一点，我有几个办法想出了
- 有一个Vue的实例
- 有一个Layout组件创建我们的布局，Header和Navbar适用于子组件。
- 我们Vue的实例将使用一个路由器为每个存在于导航工具条链路的路径
- 我们Vue的实例将渲染一个router-view组件来显示当前路径分量
- 每个路由将显示一个组件，它其模板正在使用我们以前创建的Layout组件，并使用插槽注入相应的自定义导航选项和主要内容。

Layout组分：

<template> 
<div class="app-layout"> 
    <header-component></header-component> 
    <div class="main"> 
     <navbar-component> 
     <slot name="navigation-menu"></slot> 
     </navbar-component> 
     <main> 
     <slot name="main-content"></slot> 
     </main> 
    </div> 
    </div> 
</template> 

<script> 
    import Header from './Header.vue'; 
    import Navbar from './Navbar.vue'; 
    export default { 
    name: 'Layout', 
    components: { 
     'header-component': Header, 
     'navbar-component': Navbar 
    } 
    }; 
</script> 

<style lang="sass" rel="stylesheet/scss" scoped> 
    some styling to achieve our layout for the present tags in the template 
</style>

Header组分：

<template> 
    <header v-once class="header"> 
    <router-link to="/"> 
     Brand 
    </router-link> 
    </header> 
</template> 

<script> 
    export default { 
    name: 'Header' 
    }; 
</script> 

<style lang="sass" rel="stylesheet/scss" scoped> 
    some styling to achieve our layout for the present tags in the template 
</style>

Navbar组分：

<template> 
    <nav class="navigation"> 
    <div class="links"> 
     // iterate on some property of this component, and create a list of links 
    </div> 
    <div class="menu"> 
     <slot name="navigation-menu"></slot> 
    </div> 
    </nav> 
</template> 

<script> 
    export default { 
    name: 'Navbar' 
    }; 
</script> 

<style lang="sass" rel="stylesheet/scss" scoped> 
    some styling to achieve our layout for the present tags in the template 
</style>

Vue的实例与路由：

import link1Component from './components/Link1ComponentUsingLayout.vue'; 
import link2Component from './components/Link2ComponentUsingLayout.vue'; 
import link3Component from './components/Link3ComponentUsingLayout.vue'; 

const router = new VueRouter({ 
    mode: 'history', 
    routes: [ 
    { 
     path: '/', 
     redirect: '/link1' 
    }, 
    { 
     path: '/link1', 
     name: 'link1', 
     component: Link1ComponentUsingLayout 
    }, 
    { 
     path: '/link2', 
     name: 'link2', 
     component: Link2ComponentUsingLayout 
    }, 
    { 
     path: '/link3', 
     name: 'link3', 
     component: Link3ComponentUsingLayout 
    } 
    ] 
}); 

export default new Vue({ 
    el: '#app', 
    router, 
    render: h => h('router-view') 
});

方法2：

有两台Vue的实例
有向外布局作为内部索引一个静态的HTML。HTML而不是
每个Vue的实例将使用路由器（每个），以对于每个存在于导航栏
一个实例的链路的路径的将被安装在导航中HTML组件侧边栏在我们的静态HTML，和一个中心内容区域
内每个Vue的情况下将呈现一个router-view组件来显示当前的路径组件

方法3：

有一个Vue的实例
我们Vue的实例将使用路由器与路径存在的各个侧边导航栏
或VUE实例将模板将代表我们的布局和导航栏里面的链接，中心内容方面，我们将有2个router-view组件
我们Vue的情况下，将呈现两个侧边导航栏，中心内容是当前路径组件

方法4：

与方法3相同，除了不使用路由器并使用动态组件在导航边栏和中心内容区域组件之间切换时，无论何时点击导航内的链接。现在

，我想知道哪种方法是最好的，为什么？另外我想听听新的方法，如果你有任何解释，为什么他们更好。

来源

2016-10-12 Jorayen

尽可能多的，不要在你的布局周围结构你的代码。这是我希望给你的外卖。

我倾向于使用基本上2但深一级（如3）。我有一个应用程序组件来加载components文件夹的vue的东西。在那里我有一个主要的router-view来显示路径，头和导航栏的头部组件，以及主底部的模态组件。

来源

2017-03-26 12:18:41

vue.js结构应用程序布局

回答

相关问题