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

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>

Answer 2

要打开

new tab

或

external link

，请使用

href

属性而不是

to

，例如：

<v-btn
    href="https://letesend.com/"
    target="_blank"
    icon
>
    <v-icon>window</v-icon> Link Text
</v-btn>

Answer 3

如果您绝对必须使用“: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 标记以使用该值。例如：在我的项目中，我使用以下对象中的值“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">

Answer 4

向路由器对象添加目标对我有用：

<v-btn
:to="{ name: 'Edition', params: { id: item.id }, target: '_blank'}"
>

</v-btn>

但它不适用于 @click 和 $router.push