vue路由跳转打开新窗口

// 使用 Vue Router 进行路由跳转并打开新窗口的示例代码

// 假设你已经在项目中配置好了 Vue Router，并且有如下路由配置：
// {
//   path: '/target',
//   name: 'Target',
//   component: TargetComponent
// }

// 在组件中使用以下代码进行路由跳转并打开新窗口：

methods: {
  openNewWindow() {
    // 获取目标路由的完整路径，包括 query 参数等
    const routePath = this.$router.resolve({ name: 'Target', query: { id: 123 } });

    // 使用 window.open 打开新窗口
    window.open(routePath.href, '_blank');

    // 如果需要在当前页面也进行跳转，可以添加以下代码
    // this.$router.push({ name: 'Target', query: { id: 123 } });
  }
}

解释说明：

1. this.$router.resolve：用于解析路由对象为实际的 URL。它返回一个包含 href 属性的对象，href 是完整的 URL 字符串。
2. window.open：用于在新窗口中打开指定的 URL。第二个参数 _blank 表示在新标签页中打开。
3. this.$router.push（可选）：如果你还想在当前页面进行跳转，可以使用 push 方法。

这样，点击按钮或触发该方法时，会在新窗口中打开目标路由，并且可以根据需要决定是否同时在当前页面跳转。