Vue.js 重定向到外部 URL 新选项卡 - JavaScript

你可能已经知道如何在 Vue.js 中导航到其他页面或组件，但是如果你需要在新选项卡或新窗口中打开一个外部链接，该怎么办呢？在这篇文章中，我们将介绍如何使用 Vue.js 在新选项卡或窗口中打开外部链接。

使用 Vue Router 打开链接

如果你使用 Vue Router 管理应用程序的路由，那么你可以使用以下方法在新选项卡或窗口中打开外部链接：

// HTML
<router-link to="https://www.example.com" target="_blank">示例链接</router-link>

// JS
this.$router.push({ name: 'external-url', params: { url: 'https://www.example.com' } });

在这种情况下，你需要在 Vue Router 中定义一个新路由来处理外部链接，如下所示：

{
  path: '/external-url/:url',
  name: 'external-url',
  redirect: to => {
    window.open(to.params.url, '_blank');
    return '/'; // 这里定义重定向到哪个路由
  }
}

redirect 方法中的 window.open 将在新选项卡或窗口中打开链接。你可以更改 redirect 方法返回的路径来重定向到你想要的任何路由。

使用 window.location 打开链接

如果你不使用 Vue Router，你可以使用以下方法在新选项卡或窗口中打开外部链接：

<!-- HTML -->
<a href="#" @click="redirectToExternalUrl('https://www.example.com')">示例链接</a>

// JS
methods: {
  redirectToExternalUrl(url) {
    window.open(url, '_blank');
  }
}

结论

这篇文章介绍了如何在 Vue.js 应用程序中打开外部链接。你可以使用 Vue Router 或 window.location 方法来完成此任务。无论你选择哪种方法，你都可以使用 window.open 在新选项卡或窗口中打开链接。