如何使 v-btn 在单击时不启动路由但仍根据路由显示活动状态？

Question

我在工具栏中有很好的菜单，我使用 v-btn 作为激活器，所以有些项目没有菜单，有些带有。问题出在悬停不起作用的移动设备上。 当我点击按钮时，它总是触发路线。我设置了 :on 路线，因此它会根据当前路线自动突出显示。所以不知道如何使 v-btn 不触发路线，而只是打开一个菜单，但仍然显示基于路线的选择，嗯......他孩子的子路线

<v-menu class="toolbarMenu" offset-y open-on-hover transition="slide-y-transition">
          <v-btn :to="{ path: `${constants.portfolioPath}`}" flat slot="activator">
            <v-icon class="hidden-sm-and-down" left>work_outline</v-icon>
            {{titles.portfolioMenu}}
          </v-btn>
          <v-list two-line>
            <ListItem :subtitle="titles.portfolioProjectsPage"
                      :title="titles.portfolioProjectsMenu"
                      :to="{name:constants.portfolioProjectsRoute}" icon="business"/>
            <ListItem :subtitle="titles.portfolioVideosPage"
                      :title="titles.portfolioVideosMenu"
                      :to="{name:constants.portfolioVideosRoute}" icon="movie"/>
            <ListItem :subtitle="titles.portfolioPicturesPage"
                      :title="titles.portfolioPicturesMenu"
                      :to="{name:constants.portfolioPicturesRoute}" icon="image"/>
          </v-list>
        </v-menu>

Answer 1

所以最后它有点复杂......但可以解决。只是相关代码：

<template>
   ...
    <v-menu class="toolbarMenu" offset-y open-on-hover 
            transition="slide-y-transition" v-model="isPortfolioMenuShown">
      <v-btn :class="{'disable-events': isPortfolioMenuShown}" :to="{ path: `${constants.portfolioPath}`}"
             @click.native.stop.prevent.capture="onPortfolioMainMenuButtonClick()"
             flat slot="activator">
        <v-icon class="hidden-sm-and-down" left>work_outline</v-icon>
        {{titles.portfolioMenu}}
      </v-btn>
      <v-list two-line>
        <ListItem :subtitle="titles.portfolioProjectsPage"
                  :title="titles.portfolioProjectsMenu"
                  :to="{name:constants.portfolioProjectsRoute}" icon="business"/>
        <ListItem :subtitle="titles.portfolioVideosPage"
                  :title="titles.portfolioVideosMenu"
                  :to="{name:constants.portfolioVideosRoute}" icon="movie"/>
        <ListItem :subtitle="titles.portfolioPicturesPage"
                  :title="titles.portfolioPicturesMenu"
                  :to="{name:constants.portfolioPicturesRoute}" icon="image"/>
      </v-list>
    </v-menu>
...
</template>

    <style lang="stylus" scoped>
       .toolbarMenu
         top: 50px

      .disable-events {
        pointer-events: none
      }
    </style>

    export default class... {    
        isPortfolioMenuShown = false

        onPortfolioMainMenuButtonClick = () => this.isPortfolioMenuShown = true
    }

Answer 2

似乎 Vuetify 按钮使用 vue-router 的路由器链接来处理点击和路由器重定向，因此您应该能够覆盖该按钮的默认行为。

<v-btn :to="{ path: `${constants.portfolioPath}`}" 
       flat 
       slot="activator"
       @click.native.prevent="someEmptyMethod"

>
    <v-icon class="hidden-sm-and-down" left>work_outline</v-icon>
    {{titles.portfolioMenu}}
</v-btn>

然后在脚本部分。

methods: {
    someEmptyMethod() {
        // there could be also set some action
    }
}