如何用Vuetify v-btn结合Vue Router实现新窗口打开链接？

这个问题我之前也碰到过，Vue Router的<router-link>能正常识别target="_blank"，但Vuetify的v-btn用:to绑定路由时，不会自动把target属性传递给内部封装的router-link组件，所以导致新标签页打开的功能失效。这里有几个实用的解决办法：

方法一：手动触发路由跳转并打开新标签页 #

这种方式绕过Vuetify的封装，直接通过点击事件处理跳转，兼容性最好：

在模板中：

<v-btn icon @click="openRouteInNewTab('fooRoute')">
  <v-icon>window</v-icon>
</v-btn>

然后在组件的methods中添加对应的方法：

openRouteInNewTab(routeName) {
  // 解析路由对应的完整URL
  const routeUrl = this.$router.resolve({ name: routeName }).href;
  // 打开新标签页
  window.open(routeUrl, '_blank');
}

提示：如果需要传递路由参数，直接在resolve的参数里加上params或者query即可，比如{ name: 'fooRoute', params: { id: 123 } }

方法二：用router-link结合Vuetify按钮样式 #

既然<router-link>支持target="_blank"，我们可以直接用它，然后给它加上v-btn的样式类，实现和v-btn一样的视觉效果：

<router-link 
  :to="{ name: 'fooRoute'}" 
  target="_blank" 
  rel="noopener noreferrer"
  class="v-btn v-btn--icon v-theme--light"
>
  <v-icon>window</v-icon>
</router-link>

注意：rel="noopener noreferrer"是安全最佳实践，防止新标签页通过window.opener访问原页面的权限；样式类可以根据你的主题和按钮类型调整，比如需要填充按钮就加v-btn--contained等

方法三：扩展Vuetify的v-btn组件（进阶） #

如果你项目中很多地方需要这个功能，可以封装一个自定义的按钮组件，自动处理target和路由跳转：

<template>
  <v-btn 
    v-bind="$attrs" 
    :icon="icon"
    @click="handleClick"
  >
    <slot></slot>
  </v-btn>
</template>

<script>
export default {
  props: ['to', 'target', 'icon'],
  methods: {
    handleClick() {
      if (this.to && this.target === '_blank') {
        const routeUrl = this.$router.resolve(this.to).href;
        window.open(routeUrl, '_blank');
      } else {
        // 正常路由跳转
        this.$router.push(this.to);
      }
    }
  }
}
</script>

之后就可以像原生v-btn一样使用：

<custom-btn icon :to="{ name: 'fooRoute'}" target="_blank">
  <v-icon>window</v-icon>
</custom-btn>

内容的提问来源于stack exchange，提问作者Andrew Mao