使用vue的路由打开新标签页跳转

vue的路由只支持在本标签页跳转,要用vue的路由打开新标签页需要做处理再用window.open方法打开:

javascript 复制代码
// 在当前标签页中跳转
router.push({
    path: '/new-page',
    query: {
        id: id.toString(),
    }
});
javascript 复制代码
// 在新标签页中打开
const routeData = router.resolve({
    path: '/new-page',
    query: {
        id: id.toString(),
    }
});
window.open(routeData.href, '_blank');

解释:

  1. router.push: 这是 Vue Router 提供的用于在当前标签页中进行路由跳转的方法。

  2. router.resolve : 这个方法会返回一个包含 href 等属性的对象,href 是解析后的完整 URL。

  3. window.open : 这是原生的 JavaScript 方法,用于在新标签页中打开指定的 URL。'_blank' 参数表示在新标签页中打开

相关推荐
非专业程序员6 分钟前
HarfBuzz 实战:五大核心API 实例详解【附iOS/Swift实战示例】
前端·程序员
DreamMachine13 分钟前
Flutter 开发的极简风格音乐播放器
前端·flutter
前端老宋Running19 分钟前
前端防抖与节流一篇讲清楚
前端·面试
ejinxian22 分钟前
Rust UI 框架GPUI 与 Electron 的对比
前端·javascript·electron
小马哥learn24 分钟前
Vue3 + Electron + Node.js 桌面项目完整开发指南
前端·javascript·electron
znhy@12334 分钟前
CSS3属性(三)
前端·css·css3
凌泽37 分钟前
「让规范驱动代码」——我如何用 Cursor + Spec Kit 在5小时内完成一个智能学习分析平台的
前端
omnibots41 分钟前
瑞萨SDK编译linux时,make menuconfig报错
linux·服务器·前端·嵌入式硬件
魔云连洲43 分钟前
前端树形结构过滤算法
前端·算法
涔溪1 小时前
在 Electron 框架中连接 OPC UA 服务器并读取 PLC 数据
服务器·javascript·electron