vue router打开新窗口

// 使用 Vue Router 打开新窗口的示例代码

// 假设你已经配置好了 Vue Router 并且有一个路由对象 router

// 方法 1: 使用 window.open() 打开新窗口并传递 URL
methods: {
  openNewWindow(path) {
    // 获取完整的 URL，确保在新窗口中打开的是正确的路径
    const fullPath = this.$router.resolve({ path }).href;
    // 使用 window.open() 打开新窗口
    window.open(fullPath, '_blank');
  }
}

// 在模板中使用该方法
<template>
  <button @click="openNewWindow('/some-path')">Open in New Window</button>
</template>

// 方法 2: 使用 router.push 和 target="_blank" (仅适用于 a 标签)
<template>
  <a :href="this.$router.resolve({ path: '/some-path' }).href" target="_blank">Open in New Window</a>
</template>

解释说明：

1. 方法 1 使用 window.open() 方法来打开新窗口。我们首先通过 this.$router.resolve() 获取完整的 URL，然后使用 window.open() 打开新窗口。_blank 参数确保链接在新窗口或新标签页中打开。
2. 方法 2 使用 <a> 标签结合 target="_blank" 属性。这种方式适用于直接在 HTML 中定义链接，并且可以通过 this.$router.resolve() 来获取正确的 URL。

这两种方法都可以实现通过 Vue Router 打开新窗口的功能。