vue3点击跳转地址打开一个新页面

在 Vue3 中，如果你想通过点击某个元素跳转到一个新的页面，并且希望在新的标签页或窗口中打开，你可以使用 `router-link` 组件配合 Vue Router 实现。Vue Router 是用于管理单页面应用（SPA）路由的库。

首先，你需要安装 Vue Router 并配置好路由：

npm install vue-router

然后，在组件模板中，例如 `<template>` 部分，添加一个 `router-link`：

<router-link :to="{ path: '/target-url', name: 'yourRouteName' }" target="_blank">点击跳转</router-link>

在这里，`path` 指定你要导航到的 URL 路径，`name` 是路由配置里的名称，这样你在 router.js 中可以方便地引用它。`target="_blank"` 参数表示在新标签页中打开链接。

如果你使用的是 Vue Router 的组件模式，可以在父组件里设置动态路径：

<a @click="navigateToNewTab('/new-page')">点击跳转</a>

<script setup>
import { useRouter } from 'vue-router'

const navigateToNewTab = (url) => {
  const router = useRouter()
  router.push({ path: url, target: '_blank' })
}
</script>