在新标签 vue 路由器中打开路由 - Javascript

在 Vue.js 中，我们可以使用 vue-router 来管理应用程序中的 URL。它支持通过编程的方式导航到不同的 URL，但是默认情况下会在同一标签页中打开指向不同路由的链接。如果我们希望在新的标签页中打开路由，该怎么办呢？接下来，我们将介绍在 Vue.js 应用程序中如何打开路由器并在新标签页中打开链接。

使用 target="_blank"

最简单的方法是在 HTML 中直接添加 target="_blank" 属性，这将在新窗口中打开链接。但是，我们无法编程地控制此方式如何打开链接。

<router-link to="/about" target="_blank">About</router-link>

使用 window.open()

我们可以使用 JavaScript 中的 window.open() 来打开链接并控制在新标签页中打开。如下所示，我们可以使用 window.open() 方法在新标签页中打开路由链接：

window.open('/about', '_blank')

但是，在 Vue.js 应用程序中，如果我们直接使用 window.open() 方法，它将无法在跨域应用程序中打开。这是因为浏览器通常会阻止跨域窗口调用。因此，我们需要使用 this.$router.resolve() 方法获取路由链接的绝对路径，并将其传递给 window.open() 方法。

const aboutUrl = this.$router.resolve({ path: '/about' }).href
window.open(aboutUrl, '_blank')

这个方法可以编程地控制在新标签页中打开链接，但需要更多的 JavaScript 代码。

使用 Vue.js 插件 vue-router-invoke

我们可以使用 vue-router-invoke 插件来更方便地打开链接并控制在新标签页中打开。首先，我们需要安装该插件：

npm install vue-router-invoke

然后，在应用程序中导入该插件并将其安装：

import routerInvoke from 'vue-router-invoke'
Vue.use(routerInvoke)

接下来，我们可以使用 this.$router.invoke() 方法来打开链接并控制在新标签页中打开，如下所示：

this.$router.invoke('/about', { target: '_blank' })

此方法可以非常方便地控制在新标签页中打开链接，而不需要编写过多的 JavaScript 代码。

结论

以上是在 Vue.js 应用程序中打开路由器并在新标签页中打开链接的方法。我们可以根据应用程序的需求选择适合的方法来实现。如果只有少量的链接需要在新标签页中打开，可以使用第一种方式；如果需要在 JavaScript 程序中动态构建链接并控制打开方式，可以使用第二种方式；如果需要更简洁和方便的方式，可以使用第三种方式。