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

Question

我正在使用 VueJS and 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.

的条件渲染

但我很确定有一种 nicer/cleaner 方法可以实现这一点。

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

Answer 1

当您这样设置顶栏时：

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

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

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

Top navigation menu depending on sidebar

javascript

navigation

menu

vue.js

vue-router