vue 打开新标签页

作者：让固执流亡丶发布日期:2025-09-09 浏览:40

// 在 Vue 中打开新标签页的示例代码

// 方法 1: 使用 window.open()
methods: {
  openNewTab(url) {
    // window.open() 方法会在新标签页中打开指定的 URL
    window.open(url, '_blank');
  }
}

// 使用示例：
// <button @click="openNewTab('https://example.com')">打开新标签页</button>

// 方法 2: 使用 router.push() 和 target="_blank"（适用于 Vue Router）
<template>
  <a :href="url" target="_blank">打开新标签页</a>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com'
    };
  }
};
</script>

// 解释：
// - 方法 1 使用了原生 JavaScript 的 window.open() 方法，可以在方法中动态传入 URL。
// - 方法 2 使用了 HTML 的 a 标签，并通过 target="_blank" 属性来实现新标签页打开的效果。这种方式更适合静态链接。

上一篇：vue3 引用组件

下一篇：vue获取元素高度