Question

最新版本的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"属性。我们怎样才能做到这一点？

Answer 1

尝试以下代码段

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

Vuetify Button API

Answer 2

如果您绝对必须使用Vue默认路由来匹配所有以开头的内容，那么如果您绝对必须使用“：to”绑定（例如在我们的项目中，链接是v-for的一部分，而无需对外部路由进行特殊处理），则可能有一种解决方法“ 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标记以使用该值。例如：在我的项目中，我使用以下对象的值“ route”

 {
    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">

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

2 个答案: