使用 Vuetify v-btn 和 Vue 路由器在新窗口中打开链接答案

【问题标题】：Open link in new window with Vuetify v-btn and Vue router使用 Vuetify v-btn 和 Vue 路由器在新窗口中打开链接
【发布时间】：2018-09-14 05:21:36
【问题描述】：

Vue Router 的最新版本允许在新选项卡中打开链接，例如以下

<router-link :to="{ name: 'fooRoute'}" target="_blank">
  Link Text
</router-link>

正确呈现<a target="_blank">。

但是，同样的情况似乎不适用于支持路由器路径的 Vuetify v-btn，例如，如果我们想使用图标。

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

尽管组件渲染了<a>，但没有target="_blank" 属性。我们怎样才能做到这一点？

【问题讨论】：

您介意提供minimal reproducible example 或小提琴，这样我们就不必为了查看问题并帮助调试。这可能是一个错误或与 vuetify v-btn 和 :to 的组合不受支持。
实际上不可能：github.com/vuetifyjs/vuetify/blob/v1.0.13/src/mixins/… 但你可以贡献并进行 PR :)

标签： vue.js vuejs2 vue-router vuetify.js

【解决方案1】：

如果您绝对必须使用 ":to" 绑定（就像在我们的项目中，链接是 v-for 的一部分，对外部路由没有特殊处理），则可以使用一种解决方法，使用 Vue 默认路由匹配以开头的所有内容“http”。将此添加为您的内部路由之后的最后一条规则，但不要在您的全部 404 路由之后添加（匹配 * ）

{
// This is a hack to use :to tag for absolute paths.
path: "/http*",
beforeEnter: to => {
  window.open(to.fullPath.substring(1), '_blank');
}

然后在您的组件中，添加 :to 标记以使用该值。例如：在我的项目中，我使用来自以下对象的值“路由”

 {
    title: "Help",
    detail: "Get online help and documentation.",
    icon: "mdi-help",
    color: "success darken-2",
    route: "https://www.confluence.myorg.com"
  }

像这样

<v-btn :color="l.color" text :to="l.route">

【讨论】：

【解决方案2】：

试试下面的代码sn-p

<v-btn icon href="/fooRoute" target="_blank">
  <v-icon>window</v-icon> Link Text
</v-btn>

Vuetify Button API

【讨论】：