[英]Top navigation menu depending on sidebar
I am working on a Single Page Application using VueJS and vuerouter . 我正在使用VueJS和vuerouter开发单页应用程序。
My App.vue looks like: 我的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>
I would like to achieve the following behaviour: 我想实现以下行为:
My first thought is that I can share a common state with vuex. 我的第一个想法是,我可以与vuex共享一个共同的状态。 Clicking on a main category on the sidebar would trigger a new CURRENT_STATE that would be read by the top bar. 单击侧栏上的主要类别将触发一个新的CURRENT_STATE,该信息会被顶部栏读取。 Then there would be a sort of conditional rendering based on the CURRENT_STATE. 然后将有一种基于CURRENT_STATE的条件渲染。
But I am pretty sure there is a nicer/cleaner way to achieve this. 但是我很确定有一种更好/更干净的方法可以实现这一目标。
Has anyone already encountered this issue ? 有人遇到过这个问题吗? Any idea is welcomed :) Thanks ! 任何想法都欢迎:)谢谢!
When you set up your topbar as such: 像这样设置顶部栏时:
<header><topbar :key="$route.path"></topbar></header>
Any path change should trigger the topbar to refresh. 任何路径更改都应触发顶部栏刷新。 If your sidebar should be static, then you don't have to add a key parameter there so that that won't be refreshed like the topbar will. 如果侧边栏应该是静态的,则不必在此处添加关键参数,这样就不会像顶部栏一样刷新该参数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.