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

相关推荐
onebyte8bits12 小时前
前端国际化(i18n)体系设计与工程化落地
前端·国际化·i18n·工程化
C澒12 小时前
前端分层架构实战:DDD 与 Clean Architecture 在大型业务系统中的落地路径与项目实践
前端·架构·系统架构·前端框架
BestSongC12 小时前
行人摔倒检测系统 - 前端文档(1)
前端·人工智能·目标检测
0思必得013 小时前
[Web自动化] Selenium处理滚动条
前端·爬虫·python·selenium·自动化
Misnice13 小时前
Webpack、Vite、Rsbuild区别
前端·webpack·node.js
青茶36013 小时前
php怎么实现订单接口状态轮询(二)
前端·php·接口
大橙子额14 小时前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
WooaiJava15 小时前
AI 智能助手项目面试技术要点总结(前端部分)
javascript·大模型·html5
LYFlied15 小时前
从 Vue 到 React,再到 React Native:资深前端开发者的平滑过渡指南
vue.js·react native·react.js
爱喝白开水a15 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag