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

Question

我在工具栏中有很好的菜单，我使用 v-btn 作为激活器，所以有些项目没有菜单。问题出在悬停不起作用的移动设备上。当我点击按钮时，它总是触发路线。我设置 :on route 以便根据当前路线自动突出显示。所以不知道如何使 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>

标签： javascripttypescriptvue.jsvuetify.js

Answer 1

似乎 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
    }
}