最常用方式是在 router-link 上加 target="_blank"，支持字符串路径和对象形式；编程式跳转需用 $router.resolve + window.open；原生 a 标签手动拼接 href 兼容性最强；传参优先用 query，慎用 params。
直接在 router-link 上加 target="_blank"
这是最常用也最直观的方式，适用于大多数声明式导航场景。Vue Router 的 router-link 组件本质会渲染为 a 标签，只要确保它没被自定义 tag 覆盖（比如没写 tag="span"），就可以直接使用 target="_blank"。
- 支持字符串路径：
<router-link to="/about" target="_blank">关于页</router-link> - 支持对象形式（含 name、params、query）：
<router-link :to="{ name: 'user', params: { id: 123 } }" target="_blank">用户页</router-link> - 务必加上
rel="noopener noreferrer"防止安全风险和性能问题
编程式跳转时用 $router.resolve + window.open
router.push、router.replace 等方法本身不支持 target 参数，尤其在 Vue 3 或严格模式下会失效。此时需先解析出路由的完整 URL，再用原生 API 打开：
- 在组件方法中写：
const { href } = this.$router.resolve({ path: '/help', query: { type: 'faq' } }); window.open(href, '_blank'); - Vue 3 Composition API 中：
const router = useRouter(); const { href } = router.resolve({ name: 'login', query: { redirect: '/dashboard' } }); window.open(href, '_blank'); - 注意：href 是绝对路径，自动包含 base（如 /app/），适合跨子应用或部署路径非根目录的场景
用原生 a 标签 + to 属性手动拼接（兼容性最强）
当项目对 router-link 行为有定制（比如禁用了 target 支持），或需要更精细控制链接属性时，可退回到原生 a 标签：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 直接写：
<a :href="$router.resolve({ name: 'article', params: { slug: 'vue-router-blank' } }).href" target="_blank" rel="noopener noreferrer">文章详情</a> - 优点是完全绕过 router-link 的限制，所有浏览器行为一致
- 缺点是无法享受 router-link 的激活样式（如
router-link-active类），需自行处理
传参注意事项：优先用 query，慎用 params
使用 target="_blank" 后页面在新标签页独立加载，params（依赖路由匹配阶段注入）在刷新后会丢失，而 query 参数保留在 URL 中，更可靠：
立即学习“前端免费学习笔记（深入）”；
- 推荐：
:to="{ path: '/order', query: { orderId: '1001' } }"→ URL 显示为/order?orderId=1001，刷新不丢 - 避免：
:to="{ name: 'order', params: { id: '1001' } }"→ 若路由未配置path: '/order/:id'或未带参数重进，$route.params.id为空 - 如果必须用 params，确保路由 path 显式声明动态段，并在新页逻辑中做兜底判断
