VueJS - 路由器視圖外的子導航組件？

我有使用引導如下站點佈局（它需要保持這樣的）：VueJS - 路由器視圖外的子導航組件？

<div class='row'> 
    <div class='col-md-2'> 
    <main-nav-component></main-nav-component> 
    <sub-nav-component></sub-nav-component> <!-- Problem Area --> 
    </div> 

    <div class='col-md-10'> 
    <router-view></router-view> <!-- MAIN CONTENT SECTION --> 
    </div> 
</div>

這給了我整個網站兩列：

導航欄左側右側
A「內容」列

各種頁面（但不是全部），其經由01顯示在主要內容部分（）也需要在主導航下面顯示自己的子導航。對於不同的頁面有不同的子導航，我不知道如何在VueJS中完成這個。有任何想法嗎？

來源

2017-08-29 Garfonzo

有幾種方法可以做到這一點。最簡單的方法是在組件本身中包含子標題導航組件，但是您說上述內容不會改變，所以您需要將某種數據傳遞給子導航組件，讓它知道要呈現的內容。你可以做的一種方法是使用路線。

例如，在一個應用程序中，我們需要爲一組頁面提供特定的子導航。我們已經在meta中聲明瞭一個「區域」，然後在標題組件中，我們讀取了該區域並顯示適當的子導航。

在router.js：

{ 
    path: '/profile/user', 
    name: 'Profile', 
    component: Profile, 
    meta: { zone: 'profile'} 
},

頁眉部分：

computed: { 
    zone(){ 
     return this.$store.state.route.meta.zone 
    },

而在頭組件的HTML：

<profile-nav v-if="zone == 'profile'"></profile-nav>

來源

2017-08-29 18:19:39

它看起來像你只有在'zone == profile'時才顯示'profile-nav'組件。但是如果你想展示完全不同的組件，那麼呢？你只是在該標題區域列出一大堆組件，併爲每個組件做類似的'v-if ='區域== someOtherComponent''？ – Garfonzo

這工作完美。現在，在每個'router'項目中，我有一個名爲'subNavComponent'的'meta'字段，併爲其指定我想要的sub-nav的值，如'building-sub-nav'或'contact-sub-nav'。然後，在我的'App.vue'中，我有''這是一個計算值，它返回存儲在該路由器對象的'meta'中的值，或者返回一個空字符串。完全按照我的希望工作！謝謝:) – Garfonzo

去@Garfonzo！幹得不錯！ –

VueJS - 路由器視圖外的子導航組件？

回答

相關問題