Vue/Buefy - 隐藏路由器链接点击/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>

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

我的问题是，我有一个单页应用程序，所以当我“更改”页面（单击链接）时，页面更改时下拉菜单仍然可见。

示例：

在下面的页面上：

www.example.com/#/home

我单击打开的下拉菜单，然后单击dashboard 链接，这给了我：

www.example.com/#/dashboard

但下拉菜单仍然可见。

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

更新： 我在 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 的细节，但您必须在路由器负载时设置状态变量，或者观察某种变量来告诉菜单您应用程序的另一部分中的某些内容不同。