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結構應用程序佈局

回答

相關問題