vue中使用window.open打开新窗口为什么会刷新父窗口

在 Vue 中使用 `window.open` 打开新窗口，如果新窗口的 URL 和父窗口的域名不一致，那么在某些浏览器中会将父窗口刷新，这是由于浏览器的安全策略所致。具体来说，这是为了防止恶意网站在用户不知情的情况下，通过新开窗口来进行一些攻击行为，比如弹窗广告、钓鱼欺诈等等。

如果你想避免父窗口被刷新，可以尝试在打开新窗口时添加 `rel="noopener"` 属性，或者在新窗口中添加以下 JavaScript 代码：

if (window.opener) {
  window.opener.location.reload(false);
}

这样可以阻止新窗口访问父窗口的对象，从而避免父窗口被刷新。

相关问题

vue中使用window.open打开新窗口后原始窗口为什么会跳转到首页

当你在Vue中使用`window.open`打开一个新窗口时，原始窗口跳转到首页的原因可能是因为你的Vue应用使用了HTML5的history模式。在这种模式下，Vue使用HTML5的历史记录API来管理路由。当你使用`window.open`打开一个新窗口时，浏览器会将原始窗口的历史记录替换为首页的历史记录，因为它认为这是一个新的浏览会话。

你可以尝试使用Vue的hash模式来解决这个问题，这将在URL中添加一个“＃”符号，并使用它来模拟路由，而不是使用浏览器的历史记录API。在hash模式下，当你使用`window.open`打开一个新窗口时，原始窗口不会跳转到首页。可以使用以下代码将Vue应用切换到hash模式：

const router = new VueRouter({
  mode: 'hash',
  routes: [...]
})

然而，请注意，使用hash模式可能会对SEO产生负面影响。如果你的应用需要SEO，请使用HTML5的history模式，并尝试使用其他解决方案，例如将路由信息存储在cookie或localStorage中并在新窗口中重新加载它。

vue window.open打开新窗口

vue中可以使用window.open()方法打开新窗口。该方法的使用方式与普通的JavaScript中一样，通过给定URL和窗口名称来打开新窗口。例如：
window.open('https://www.example.com', '_blank');

在Vue中，你可以在需要打开新窗口的地方调用window.open()方法。确保在Vue组件的方法中使用该方法时，使用箭头函数，以便正确引用window对象。例如：

<template>
  <div>
    <button @click="openNewWindow">打开新窗口</button>
  </div>
</template>

<script>
export default {
  methods: {
    openNewWindow() {
      window.open('https://www.example.com', '_blank');
    }
  }
}
</script>