使用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' 参数表示在新标签页中打开

相关推荐
还好还好不是吗20 小时前
老项目改造 vue-cli 2.6 升级 rsbuild 提升开发效率300% upupup!!!
前端·性能优化
sumAll20 小时前
别再手动对齐矩形了!这个开源神器让 AI 帮你画架构图 (Next-AI-Draw-IO 体验)
前端·人工智能·next.js
OpenTiny社区20 小时前
2025OpenTiny星光ShowTime!年度贡献者征集启动!
前端·vue.js·低代码
wangan09420 小时前
不带圆圈的二叉树
java·前端·javascript
狗哥哥20 小时前
从零到一:打造企业级 Vue 3 高性能表格组件的设计哲学与实践
前端·vue.js·架构
疯狂平头哥20 小时前
微信小程序真机预览-数字不等宽如何解决
前端
Drift_Dream20 小时前
前端趣味交互:如何精准判断鼠标从哪个方向进入元素?
前端
计算机毕设VX:Fegn089520 小时前
计算机毕业设计|基于springboot + vue图书借阅管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
hqk20 小时前
鸿蒙ArkUI:状态管理、应用结构、路由全解析
android·前端·harmonyos
米思特儿林20 小时前
NuxtImage 配置上传目录配置
前端