Question

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

  <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的具体信息，但是您必须在路由器负载上设置状态变量，或者观看某种变量以告诉菜单应用程序其他部分的内容有所不同。

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

1 个答案: