未按下时，v-bottom-navigation 中的 Vuetify v-btn 保持活动状态

Question

我在 Vuetify 的底部导航栏中遇到了一个按钮问题。我已经定义了一堆按钮作为路由（我正在使用 Nuxtjs），所以如果我在那个页面上，一个按钮将被激活。

虽然底部导航栏中有一个按钮不是路线，但它的存在是为了激活 v-navigation-drawer。当我点击这个按钮时，抽屉滑出很好。但是，当我在抽屉外单击以使其向后滑动时，我所在页面的按钮和激活抽屉的按钮都处于活动状态。我希望激活抽屉的按钮永远不会激活。

视觉-- 我在应用程序的主页上。

Here is what the bottom nav looks like before clicking the button for the v-navigation-drawer

Here is what the bottom nav looks like after I close the v-navigation-drawer. The button furthest to the right is what activates the navigation drawer, and it should never remain active after I close the drawer. Yet it does, and I need to click another button to deactivate it.

我已经尝试了很多关于其他问题的建议来解决这个问题，包括但不限于以下：为此按钮定义一个自定义活动 class，使用 exact 道具，并使用观察者来更改导航栏中活动值的值。 None 这些东西都奏效了。

这是问题所在的代码。我已经删除了不相关的按钮，只保留主页和个人资料按钮（个人资料是不受欢迎的问题之一）：

<v-bottom-navigation
      app
      fluid
      grow
      color="primary"
      class="d-flex d-sm-none"
>
    <v-btn
      value="home"
      to="/home"
      nuxt
      exact
    >
        <v-icon>
            mdi-home
        </v-icon>
    </v-btn>

    
    <v-btn
      value="profile"
      exact
      @click="showProfileNavDrawer"
    >
        <v-icon>
          mdi-account-circle
        </v-icon>
    </v-btn>
</v-bottom-navigation>

个人资料按钮在我关闭它打开的导航抽屉后保持活动状态（由于 vue 的路由器，另一个按钮同时处于活动状态），我只能通过单击另一个按钮来停用个人资料按钮。

我该如何解决这个问题？

编辑对于来自搜索引擎的任何人，我想我弄清楚出了什么问题。这似乎是 Vuetify 底部导航的限制。它是专门用于导航的，因为这个按钮位于底部导航栏上，没有指定的路线（它所做的只是滑出导航抽屉，没有路线变化），它暂时将自己与当前路线相关联，直到另一条路线被导航到并且底部导航栏的状态被修改。这种解释可能是错误的，但它似乎符合行为。

由于我对 CSS 的了解不足（第一次建立网站，我的日常工作主要是数据工程），我无法解决问题，所以我只是更改了我的 webapp 的设计。对所有希望得到答案的人表示歉意:(

Answer 1

@genp 根据 v-btn 的文档，如果作为 prop 传入但未指定路由，exact 将匹配每条路由。您的 btn 是否可以匹配当前路线并因此触发它的活动状态？你如何从导航中的按钮中删除 exact 道具。有什么变化吗？文档 here.

未按下时，v-bottom-navigation 中的 Vuetify v-btn 保持活动状态

Vuetify v-btn in v-bottom-navigation stays active when not pressed

javascript

vue.js

nuxt.js

vuetify.js