vue实现新窗口路由
Vue 实现新窗口路由的方法
在 Vue 项目中，可以通过以下几种方式实现新窗口打开路由的功能。
使用 router.resolve 和 window.open
通过 Vue Router 的 router.resolve 方法解析目标路由，生成完整的 URL，再使用 window.open 在新窗口中打开。
const route = this.$router.resolve({
name: 'TargetRouteName',
params: { id: 123 }
});
window.open(route.href, '_blank');使用 <router-link> 的 target 属性
在模板中直接使用 <router-link> 并设置 target="_blank"，可以实现在新窗口打开路由。
<router-link :to="{ name: 'TargetRouteName' }" target="_blank">
点击在新窗口打开
</router-link>使用编程式导航结合 window.open
在方法中通过编程式导航获取目标路由的路径，再使用 window.open 打开。
const path = this.$router.resolve({
path: '/target-path',
query: { param: 'value' }
}).href;
window.open(path, '_blank');动态生成 <a> 标签
通过动态生成 <a> 标签并设置 href 和 target 属性，实现新窗口打开。
const link = document.createElement('a');
link.href = this.$router.resolve({ name: 'TargetRouteName' }).href;
link.target = '_blank';
link.click();注意事项
- 使用
window.open时，浏览器可能会拦截弹出窗口，需确保在用户交互事件（如点击）中调用。 - 如果路由模式为
hash模式，生成的 URL 会包含#，需根据项目需求调整。 - 对于需要传递复杂参数的情况，建议使用
query或params确保数据完整。
