Vuetify 2.x 中如何在 v-btn 中使用 Vue 路由在新窗口中打开链接？

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

问题

虽然 Vue 路由引入了 target="_blank" 属性，允许在新的窗口中打开链接，但该属性在 Vuetify v-btn 组件中似乎不可用，导致在支持路由路径的按钮中无法使用。

解决方案

要解决此问题，需要采取以下步骤：

1. 修改 Vuetify 源代码： 编辑 node_modules/vuetify/src/components/VBtn/VBtn.ts 文件，将 createAnchor(this, 'a') 替换为 createAnchor(this, 'a', ['target', 'href'])。
2. 重新编译 Vuetify： 在终端中运行 cd node_modules/vuetify && npm run build。

代码示例

修改后，可以使用以下代码在 v-btn 中使用 target="_blank" 属性：

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

注意事项

• 此方法仅适用于 Vuetify 2.x 版本。
• 在 Vuetify 3.x 中，使用 <router-link> 组件在新窗口中打开链接。

深入探讨

为何修改 Vuetify 源代码？

Vuetify VBtn 组件使用自定义的锚点生成方法，默认情况下不会传递 target="_blank" 属性。通过修改源代码，我们可以扩展方法以包括此属性。

重新编译 Vuetify 的重要性

对 Vuetify 源代码的修改不会在应用程序中立即生效。重新编译 Vuetify 会生成更新的 JavaScript 捆绑包，其中包含修改的代码。

常见问题解答

1. 为什么 router-link 不适用于 v-btn？

router-link 是 Vue 路由提供的一个组件，主要用于基于 JavaScript 的路由导航。Vuetify v-btn 组件是一个具有特定样式和交互行为的按钮，它不适合使用 router-link。

2. 如何在新选项卡中打开链接？

除了 target="_blank"，还可以使用 rel="noopener" 属性在新选项卡中打开链接，它将禁用由 target="_blank" 创建的沙箱。

3. 可以使用 v-btn 在新窗口中打开外部链接吗？

是的，可以为外部链接指定 target="_blank" 属性，方法是使用 :href="..." 而不是 :to="..."。

4. 为什么需要重新编译 Vuetify？

重新编译 Vuetify 对于使修改生效至关重要，因为它将使用更新的代码生成新的 JavaScript 捆绑包。

5. 此方法是否适用于 Vuetify 3.x？

否，此方法仅适用于 Vuetify 2.x 版本。在 Vuetify 3.x 中，使用 <router-link> 组件在新窗口中打开链接。