頂部導航菜單取決於側欄

我App.vue樣子：

<template> 
    <div id="app"> 

    <header><topbar></topbar></header> 

    <div class="wrapper"> 
     <main><router-view></router-view></main> 
     <nav><sidebar></sidebar></nav> 
    </div> 

    <footer>footer</footer> 
    </div> 
</template>

我想實現以下行爲：

工具欄菜單顯示靜態的主要類別，用戶可以瀏覽到
的禮帽菜單取決於主側欄菜單，並且必須顯示與主類別相關的子類別。

我的第一個想法是我可以與vuex共享一個共同的狀態。點擊側邊欄上的主要類別將觸發一個新的CURRENT_STATE，該頂部欄將讀取新的CURRENT_STATE。那麼會有一種基於CURRENT_STATE的條件呈現。

但我很肯定有一個更好/更乾淨的方式來實現這一點。

有沒有人遇到過這個問題？任何想法都歡迎:) 謝謝！

來源

2017-07-31 Bikemat

您的主要Vue知道邊欄和頂欄。你的主要Vue可以控制他們的共享數據。 –

當您設置的頂欄這樣：

<header><topbar :key="$route.path"></topbar></header>

任何路徑變化應觸發的頂欄刷新。如果你的側邊欄應該是靜態的，那麼你不必在那裏添加一個關鍵參數，這樣就不會像頂欄那樣刷新。

來源

2017-08-01 08:29:01 Joos

嗨@Joos，謝謝。就我而言，它也可以在沒有通過鑰匙作爲道具的情況下工作。我的topbar組件對沒有prop的$ route.path作出反應。我設法通過檢查$ route.path來有條件地渲染頂欄組件的模板。 #KeepItSimple :) – Bikemat

關鍵屬性是一個很好的竅門，但如果你不需要它，那就更好了：P很好！ – Joos

頂部導航菜單取決於側欄

回答

相關問題