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

Question

我有一个带有用户可以单击的菜单的导航栏。有些链接需要打开一个新选项卡。这就是我所拥有的，但我无法让它发挥作用。

\n

<template>\n    <nav>\n        <v-app-bar text app color="blue">\n            <v-app-bar-nav-icon class="white--text" @click="drawer = !drawer"></v-app-bar-nav-icon>\n            <v-app-bar-title class="text-uppercase white--text">\n                <span class="font-weight-light">Logo</span>\n                <span>Global</span>\n            </v-app-bar-title>\n        </v-app-bar>\n\n        <v-navigation-drawer v-model="drawer" app class="grey lighten-1">\n            <v-list>\n                <img class="ml-5 mb-3" src="../assets/Logo-Blue.png" width="70" />\n\n                <v-list-item v-for="link in links" :key="link.text" router :to="link.route" @click="go(link)">\n                    <v-list-item-action>\n                        <v-icon>{{ link.icon }}</v-icon>\n                    </v-list-item-action>\n                    <v-list-item-content>\n                        <v-list-item-title> {{ link.text }} </v-list-item-title>\n                    </v-list-item-content>\n                </v-list-item>\n            </v-list>\n        </v-navigation-drawer>\n    </nav>\n</template>\n<script>\nexport default {\n    data() {\n        return {\n            drawer: true,\n            links: [\n                { icon: \'home\', text: \'Dashboard\', route: \'/dashboard\', newTab: false },\n                { icon: \'leaderboard\', text: \'Stats\', route: \'www.google.com\xc2\xa0\', newTab: true },\n            ]\n        }\n    },\n    methods: {\n        go(link) {\n            console.log(\'go run ...\')\n            console.log(link)\n            console.log(process.env.APP_URL)\n\n            if (!link.newTab) {\n                this.$router.push({ path: link.route })\n            } else {\n                window.open(link.route)\n            }\n        }\n    }\n}\n</script>\n

\n

---

\n

src/路由器/index.js

\n

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

\n

我做错了什么吗？

\n

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

\n

Answer 1

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

• href：要使用 来创建外部链接<v-list-item>，请使用hrefprop. 应使用内部链接to代替。

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

v-list-item链接到外部 URL 的A将使用href如下 prop：

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

内部链接使用toprop 而不是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的对象（其中对象的键值对绑定为组件 props）：

1. 计算一个新的链接数组（名为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,
        }
      })
    },
  },
}

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

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

演示