vue3 使用router.push打开新标签

在Vue3中，可以使用`router.push`方法打开一个新标签页。你可以将一个对象作为参数传递给该方法，并在该对象中指定新标签页的URL和其他选项。

以下是示例代码：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ...
  ],
})

const openInNewTab = (url) => {
  const routeData = router.resolve({ path: url })
  window.open(routeData.href, '_blank')
}

// 用法示例
openInNewTab('/new-page')

在上面的示例中，我们定义了一个名为`openInNewTab`的函数，该函数接受一个URL作为参数。该函数使用`router.resolve`方法来解析该URL并生成一个路由对象。然后，它使用`window.open`方法将该路由对象的`href`属性传递给`_blank`选项，从而在新标签页中打开该URL。

你可以在Vue组件中使用`openInNewTab`函数，就像这样：

export default {
  methods: {
    handleClick() {
      this.$router.push('/new-page')
      openInNewTab('/new-page')
    },
  },
}

在这个示例中，我们在组件的`handleClick`方法中同时调用`router.push`和`openInNewTab`方法。这将在当前页面中打开`/new-page`路由，并在新标签页中打开相同的路由。