Vue3 路由跳转打开新页面的方法

在 Vue3 中，有几种方法可以实现路由跳转时打开新页面：

1. 使用 router.resolve 方法

import { useRouter } from 'vue-router'const router = useRouter()const openNewPage = (path) => {const resolved = router.resolve(path)window.open(resolved.href, '_blank')
}

2. 使用 window.open 直接打开路径

const openNewPage = (path) => {window.open(path, '_blank')
}

3. 在模板中使用 <a> 标签

<a :href="yourPath" target="_blank">打开新页面</a>

4. 使用编程式导航并指定 target

const openNewTab = () => {const routeData = router.resolve({name: 'YourRouteName', // 或 path: '/your-path'params: { /* 参数 */ },query: { /* 查询参数 */ }})window.open(routeData.href, '_blank')
}

5. 使用路由的 location 对象

const openNewTab = () => {const location = router.resolve({name: 'YourRouteName',params: { id: 123 }})window.open(location.href, '_blank')
}

注意事项

1. 如果使用动态路径参数，确保正确处理参数传递
2. 新打开的页面会是一个全新的 Vue 应用实例
3. 如果需要在新页面和原页面之间通信，可能需要使用 localStorage 或 postMessage
4. 某些浏览器可能会阻止弹出窗口，确保这些操作是由用户触发的（如点击事件）

选择哪种方法取决于你的具体需求和项目结构。第一种和第四种方法更为推荐，因为它们直接使用了 Vue Router 的功能。