Vuetify：如何配置 VueRouter 在新选项卡上打开链接？

Question

我有一个导航栏，里面有一个用户可以点击的菜单。一些链接需要打开一个新标签。这就是我所拥有的，但我无法让它工作。

<template>
    <nav>
        <v-app-bar text app color="blue">
            <v-app-bar-nav-icon class="white--text" @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-app-bar-title class="text-uppercase white--text">
                <span class="font-weight-light">Logo</span>
                <span>Global</span>
            </v-app-bar-title>
        </v-app-bar>

        <v-navigation-drawer v-model="drawer" app class="grey lighten-1">
            <v-list>
                <img class="ml-5 mb-3" src="../assets/Logo-Blue.png" width="70" />

                <v-list-item v-for="link in links" :key="link.text" router :to="link.route" @click="go(link)">
                    <v-list-item-action>
                        <v-icon>{{ link.icon }}</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title> {{ link.text }} </v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
    </nav>
</template>
<script>
export default {
    data() {
        return {
            drawer: true,
            links: [
                { icon: 'home', text: 'Dashboard', route: '/dashboard', newTab: false },
                { icon: 'leaderboard', text: 'Stats', route: 'www.google.com ', newTab: true },
            ]
        }
    },
    methods: {
        go(link) {
            console.log('go run ...')
            console.log(link)
            console.log(process.env.APP_URL)

            if (!link.newTab) {
                this.$router.push({ path: link.route })
            } else {
                window.open(link.route)
            }
        }
    }
}
</script>

---

src/router/index.js

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

我做错了吗？

打开一个新选项卡似乎可以工作，但它一直在我的本地主机 URL 前面。

Answer 1

不要将click-handler 与v-list-item 一起使用，因为这会破坏为路由生成的底层锚标记，并且会影响可访问性。坚持使用 v-list-item 内置的路由道具：

• href：要使用<v-list-item> 创建外部链接，请使用href 属性。内部链接应使用to。

• target：要在点击链接后打开新窗口，请使用 target="_blank" 属性。

链接到外部 URL 的 v-list-item 将使用 href 属性，如下所示：

<v-list-item href="https://google.com">Google</v-list-item>

打开新标签的人会使用target="_blank" 属性：

<v-list-item target="_blank" href="https://google.com">Google</v-list-item>

内部链接使用to 属性而不是href：

<v-list-item to="/dashboard">Dashboard</v-list-item>

它们也可以使用target="_blank" 在新标签中打开：

<v-list-item target="_blank" to="/dashboard">Dashboard</v-list-item>

解决方案

在您的情况下，您有一组项目需要有条件地绑定前面提到的道具。最好使用 v-bind with an object（对象的键值对作为组件 props 绑定）来完成，它是根据每个项目的属性计算的：

1. Compute 一个新的链接数组（名为 computedLinks），它有一个要绑定的新道具（名为 linkProps）：

export default {
  computed: {
    computedLinks() {
      return this.links.map(link => {
        const isExternalLink = url => /^((https?:)?\/\/)/.test(url)
        const linkProps = {
          [isExternalLink(link.route) ? 'href' : 'to']: link.route,
        }
        if (link.newTab) {
          linkProps.target = '_blank'
        }
        return {
          ...link,
          linkProps,
        }
      })
    },
  },
}

1. 更新模板以使用computedLinks，并将每个链接的linkProps绑定到其对应的v-list-item：

<v-list-item v-for="link in computedLinks" :key="link.text" v-bind="link.linkProps">
                                   ?                                        ?

demo

Answer 2

“/dashboard”等值对 Window.open 无效，您需要完整路径。

试试：

if (!link.newTab) {
  this.$router.push({ path: link.route })
} else {
  let routeData = this.$router.resolve({path: link.route});
  window.open(routeData.href, '_blank');
}

vue 路由器通过这种方式处理路径构建并将环境考虑在内。

来源：Can vue-router open a link in a new tab?