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 确保数据完整。