在Vue.js中打开新页面通常指的是在浏览器中打开一个新的标签页或窗口。Vue.js本身并不直接提供打开新页面的功能，但可以通过JavaScript的原生方法来实现。以下是详细的说明和案例：

1. 使用 window.open 方法

window.open 是JavaScript中用于打开新窗口或标签页的标准方法。你可以通过在Vue组件的方法中调用 window.open 来实现这一功能。

案例：

<template>
  <div>
    <button @click="openNewPage">打开新页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    openNewPage() {
      // 打开一个新的标签页，访问指定的URL
      window.open('https://www.example.com', '_blank');
    }
  }
}
</script>

<style scoped>
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #35495e;
}
</style>

2. 使用 router.push 方法（在同一应用内跳转）

如果你是在同一个Vue应用内跳转到不同的路由页面，而不是打开一个新的浏览器标签页，你可以使用Vue Router的 router.push 方法。

案例：

<template>
  <div>
    <button @click="navigateToNewPage">跳转到新页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToNewPage() {
      // 使用Vue Router跳转到指定的路由
      this.$router.push({ name: 'newpage' });
    }
  }
}
</script>

<style scoped>
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #35495e;
}
</style>

3. 使用 window.location.href 方法

如果你想在当前窗口或标签页中跳转到新的URL，可以使用 window.location.href。

案例：

<template>
  <div>
    <button @click="redirectToNewPage">重定向到新页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    redirectToNewPage() {
      // 在当前窗口中重定向到新的URL
      window.location.href = 'https://www.example.com';
    }
  }
}
</script>

<style scoped>
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #35495e;
}
</style>

4. 使用 router.replace 方法（替换当前路由）

router.replace 方法与 router.push 类似，但它不会在浏览器历史记录中添加新的记录，而是替换当前的记录。

案例：

<template>
  <div>
    <button @click="replaceWithNewPage">替换当前页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    replaceWithNewPage() {
      // 使用Vue Router替换当前路由
      this.$router.replace({ name: 'newpage' });
    }
  }
}
</script>

<style scoped>
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #35495e;
}
</style>

总结

在Vue.js中打开新页面有多种方式，具体选择哪种方式取决于你的需求。如果你需要在新标签页中打开外部链接，使用 window.open 是最直接的方法。如果你是在同一个Vue应用内跳转，使用Vue Router的 router.push 或 router.replace 是更合适的选择。