Vue/Buefy - 在路由器上隐藏下拉菜单-link 点击/SPA

Question

我在使用 Buefy 和 Vue 时遇到了一些问题。我有一个简单的 SPA（单页应用程序），它使用 vue-router。我有一个如下所示的下拉菜单：

  <b-dropdown class="user-dropdown" v-model="navigation" position="is-bottom-left">
    <a class="navbar-item" slot="trigger">
      <span class="tag is-rounded has-text-weight-semibold avatar">OB</span>
    </a>
    <div class="columns is-marginless">
      <div class="column has-text-centered">
        <router-link to="home">
          <b-icon class="is-large is-size-4" icon="ion-ionic ion-ios-search"></b-icon>
        </router-link>
      </div>
      <div class="column has-text-centered">
        <router-link to="dashboard">
          <b-icon class="is-large is-size-4" icon="ion-ionic ion-ios-contact"></b-icon>
        </router-link>
      </div>

    </div>
  </b-dropdown>

让下拉列表显示效果很好。如果我在可见下拉菜单之外的页面上的任意位置单击，它也会隐藏。

我的问题是，我有一个单页应用程序，所以当我 "change" 页面（单击 link）时，下拉列表在页面更改时仍然可见。

示例：

在下面的页面上：

www.example.com/#/home

我点击打开的下拉菜单，然后点击 dashboard link，结果是：

www.example.com/#/dashboard

但下拉菜单仍然可见。

任何人都知道我该怎么做，所以当我点击其中的 links 时，下拉菜单会切换？

更新： 我在 Chrome 中使用 Vue Dev 工具，我可以看到当我单击下拉菜单时它会切换到活动状态，我看到这个：

name:"active-change"
type:"$emit"
source:"<BDropdown>"
payload:Array[1]
0:true

当我点击页面上的任意位置关闭下拉菜单时，它看起来像这样：

name:"active-change"
type:"$emit"
source:"<BDropdown>"
payload:Array[1]
0:false

Answer 1

无论下拉菜单正在监视什么状态都不会改变，因为在 SPA 中它只是 javascript。我不知道关于 Buefy 的细节，但你必须在路由器加载时设置状态变量，或者观察某种变量来告诉菜单你的应用程序的另一部分中的某些东西是不同的。

Vue/Buefy - 在路由器上隐藏下拉菜单-link 点击/SPA

Vue/Buefy - Hide dropdown on router-link click / SPA

javascript

vue.js

bulma

buefy