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 的功能。