vue在本页打开新页面

在Vue中打开新页面也可以使用JavaScript中的`window.open()`方法。你可以在Vue组件的方法中调用这个方法来实现在当前页面中打开一个新的窗口或标签页。

例如，在Vue组件的一个方法中，你可以使用以下代码来实现在新标签页中打开一个Google搜索页面：

openNewPage() {
  window.open('https://www.google.com', '_blank');
}

在模板中，你可以将这个方法绑定到一个按钮或其他元素的点击事件上，例如：

<template>
  <button @click="openNewPage">在新标签页中打开Google</button>
</template>

当用户点击这个按钮时，Vue会自动调用`openNewPage`方法，从而在新标签页中打开Google搜索页面。

相关问题

vue页面禁止拖动打开新窗口

在Vue.js中，如果你想阻止页面上的某个元素被用户拖动并打开新窗口，你可以利用JavaScript的事件处理机制以及`dragstart` 和 `drop` 事件。以下是一个简单的示例，展示如何在Vue组件上应用这个功能：

<template>
  <div v-on:dragstart.prevent="onDragStart" @drop="onDrop">不可拖动内容</div>
</template>

<script>
export default {
  methods: {
    onDragStart(e) {
      e.preventDefault(); // 阻止浏览器默认的拖放行为
      e.stopPropagation(); // 阻止单元格内部的事件冒泡
    },
    
    onDrop(e) {
      // 如果你想完全禁用打开新窗口的行为，可以在这里添加代码阻止右键菜单的"复制链接"等操作
      if (e.button === 0) { // 只对左键单击有效
        e.preventDefault();
      }
    },
  },
};
</script>

在这个例子中，`v-on:dragstart.prevent="onDragStart"` 使用了`.prevent`修饰符来阻止元素被拖动到另一个位置，而`@drop="onDrop"`监听`drop`事件，进一步防止点击事件导致新窗口打开。

如果你想要更细致地控制，比如检查目标是否是链接或图片，并且只针对那些类型的元素，你可以在`onDrop`方法里添加相应的判断和处理。

Vue3 路由跳转打开新的页面

在 Vue3 中，可以使用 `router-link` 组件来实现路由跳转，如果需要在新的页面打开链接，可以添加 `target="_blank"` 属性，例如：

<router-link to="/new-page" target="_blank">打开新页面</router-link>

如果需要在 JS 中进行路由跳转，可以使用 `$router.push` 方法，并在路由配置中设置 `target: '_blank'`，例如：

// 在组件中
this.$router.push({ path: '/new-page' })

// 在路由配置中
{
  path: '/new-page',
  component: NewPageComponent,
  meta: {
    target: '_blank'
  }
}

这样就可以在新的页面打开链接了。