顶部导航菜单取决于侧边栏

Question

我正在使用VueJS和vuerouter处理单页应用程序。

我的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的条件渲染。

但我很确定有更好/更清洁的方法来实现这一目标。

有没有人遇到过这个问题？欢迎任何想法:) 谢谢！

Answer 1

当您设置topbar时：

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

任何路径更改都应触发顶栏刷新。如果您的侧边栏应该是静态的，那么您不必在那里添加一个关键参数，以便不会像顶部栏那样刷新。