vue 跳转新窗口的方法

1.使用router-link

<router-link :to="{ name: 'pageA', params: { id: Id}}" tag="a" target="_blank">新页面</router-link>
  • to 指的要跳转的路由以及参数,params指的参数需要在URL中隐藏 ;如果需要显示在URL中,则使用 query。
  • tag="a" 指定渲染为 <a> 标签。<router-link> 默认并不直接支持 target="_blank" 属性,将其渲染为原生的a标签
  • target="_blank" 打开新链接,必须添加tag="a" 才有作用

2.使用$router.resolve

适用于@绑定了点击事件需要跳转的场景

<button @click="openNewPage(e)">打开新页面</button>
methods: {openNewPage(e) {const routeUrl = this.$router.resolve({ name: 'pageA', params: { id: e } });window.open(routeUrl.href, '_blank');}
}

3.window.open

适用于有新的完整的链接跳转,将新链接的url放入open中即可

window.open('https://www.example.com');

参考博客:vue router-link 跳转 打开新标签页面_ant design vue router-link打开新的标签页 并传参-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/865789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络攻防——kali操作系统基本使用

1.阅读前的声明 本文章中生成的木马带有一定的攻击性&#xff0c;使用时请遵守网络安全相关的法律法规&#xff08;恶意攻击操作系统属于违法行为&#xff09;。 2.环境安装 生成木马主要需要如下工具&#xff1a;kali操作系统&#xff0c;VMware15&#xff08;搭建kali操作…

Beyond Compare 解锁版下载及安装教程 (文件和文件夹比较工具)

前言 Beyond Compare 是一款功能强大的文件和文件夹比较工具。它支持文件夹比较、文件夹合并与同步、文本比较、表格比较、图片比较、16进制比较、注册表比较、版本比较等多种功能。通过 Beyond Compare&#xff0c;您可以轻松调查文件和文件夹之间的不同之处&#xff0c;并使…

【Qwen2部署实战】探索Qwen2-7B:通过FastApi框架实现API的部署与调用

系列篇章&#x1f4a5; No.文章1【Qwen部署实战】探索Qwen-7B-Chat&#xff1a;阿里云大型语言模型的对话实践2【Qwen2部署实战】Qwen2初体验&#xff1a;用Transformers打造智能聊天机器人3【Qwen2部署实战】探索Qwen2-7B&#xff1a;通过FastApi框架实现API的部署与调用4【Q…

电脑恢复技巧:如何在 Windows 10 中恢复删除的文件夹

丢失文件和文件夹是一件非常可怕的事情&#xff0c;尤其是当你不知情的情况下删除它们时。别撒谎。我们知道你也经历过这种情况&#xff0c;而且你也知道我们在说什么&#xff01; 我们都曾有过这样的经历&#xff0c;而且大多数人很快就会再次经历。在 Windows 中&#xff0c…

从内外参推导IPM变换方程及代码实现(生成AVM环视拼接图)

一、前言 最近想实现AVM拼接&#xff0c;看了不少博客和论文&#xff0c;不过比较愚钝&#xff0c;一直没能很好理解原理&#xff0c;尤其是怎么在实现时把下文式1与式2中Z1和Z2消除的&#xff0c;所以严谨的推导了一下对应的公式&#xff0c;如有不对&#xff0c;水平有限&am…

Qt Group与华为合作开发OpenHarmony版本,打造无缝跨设备操作系统

在华为开发者大会2024上&#xff0c;跨平台软件开发和质量保证工具的领先供应商 Qt Group&#xff08;Nasdaq, Helsinki: QTCOM&#xff09;荣幸地宣布成为OpenHarmony生态系统合作伙伴。这是继近几年华为采用Qt开发框架和自动化测试工具Squish的商业许可后&#xff0c;Qt Grou…

Elasticsearch集群部署(下)

目录 上篇&#xff1a;Elasticsearch集群部署&#xff08;上&#xff09;-CSDN博客 七. Filebeat 部署 八. 部署Kafka 九. 集群测试 链接&#xff1a;https://pan.baidu.com/s/1AFXSmDdY5xBb7g35ipKoaw?pwdfa9m 提取码&#xff1a;fa9m 七. Filebeat 部署 为什么用 F…

搭建基础库~

前言 项目中会用到工具库、函数库以及一些跟框架绑定的组件&#xff0c;如果这些基础模块每个项目都实现一套&#xff0c;维护起来那真的头大&#xff0c;你说呢&#x1f609; 搭建流程 准备工作 创建文件夹myLib、安装Git以及pnpm 目录大概就系这样子&#xff1a; myLib ├…

Vue跨域获取ip和ip位置城市等归属地信息

由于端口设置与查询服务器不一致&#xff0c;所以不能直接从ip138网上抓取&#xff0c;只能跨域查询。实现跨域查询&#xff0c;简单的方法是使用jsonp方式&#xff0c;只支持get请求&#xff0c;同时也需要查询的服务器支持jsonp。这时找到了腾讯位置服务。参考文章&#xff0…

Appium Inspector介绍和使用

一、什么是Appium Inspector 官方介绍&#xff1a;Overview - Appium Inspector 检查器的主要目的是提供应用程序页面源代码的检查功能。它主要用于测试自动化开发&#xff0c;但也可用于应用程序开发 - 或者如果只是想查看应用程序的页面源代码&#xff01; 从本质上讲&…

API Object设计模式

API测试面临的问题 API测试由于编写简单&#xff0c;以及较高的稳定性&#xff0c;许多公司都以不同工具和框架维护API自动化测试。我们基于seldom框架也积累了几千条自动化用例。 •简单的用例 import seldomclass TestRequest(seldom.TestCase):def test_post_method(self…

vue3项目图片压缩+rem+自动重启等plugin使用与打包配置

一、Svg配置 每次引入一张 SVG 图片都需要写一次相对路径&#xff0c;并且对 SVG 图片进行压缩优化也不够方便。 vite-svg-loader插件加载SVG文件作为Vue组件&#xff0c;使用SVGO进行优化。 插件网站https://www.npmjs.com/package/vite-svg-loader 1. 安装 pnpm i vite-svg…

步进电机(STM32+28BYJ-48)

一、简介 步进电动机&#xff08;stepping motor&#xff09;把电脉冲信号变换成角位移以控制转子转动的执行机构。在自动控制装置中作为执行器。每输入一个脉冲信号&#xff0c;步进电动机前进一步&#xff0c;故又称脉冲电动机。步进电动机多用于数字式计算机的外部设备&…

DOM 中包含哪些重要方法

1. alert 带有指定消息的警告框 alert("hello world"); 2. confirm 带有确定和取消的对话框&#xff0c;点击确定返回 true&#xff0c;点击取消返回 false confirm("你好吗"); 3. prompt 显示一个提示框&#xff0c;允许用户输入文本&#xff0c;点击…

CST电磁仿真创建独特的天线

在日益无线化的世界中&#xff0c;一切都取决于天线&#xff0c;从我们用于医疗保健、工作和娱乐的智能设备到将我们从一个地方带到另一个地方的车辆。它们如此融入我们的日常生活&#xff0c;以至于我们大多数人甚至没有想到它们——即使想到了&#xff0c;我们也会想象屋顶上…

ubnutu20.04-vscode安装leetcode插件流程

1.在vscode插件商城选择安装leetcode 2.安装node.js 官网下载一个版本安装流程&#xff1a; ①tar -xvf node-v14.18.0-linux-x64.tar.xz ①sudo ln -s /app/software/nodejs/bin/npm /usr/local/bin/ ②ln -s /app/software/nodejs/bin/node /usr/local/bin/ 查看版本&…

nginx的LNMP构建+discuz论坛

一、LNMP&#xff1a; L&#xff1a;linux 操作系统 N&#xff1a;nginx前端页面的web服务 P&#xff1a;PHP&#xff0c;是一种开发动态页面的编程语言&#xff0c;解析动态页面&#xff0c;起到中间件的作用&#xff08;在nginx和数据库的中间&#xff09;&#xff0c;在中…

横截面数据回归

横截面数据回归 一些笔记 观测值一定要比参数值多 p值<0.05,拒绝H0. 参数显著&#xff0c;不能说明模型对 AIC与BIC准则&#xff0c;越小越好的指标值AIC 回归分析一定要进行残差的正态性检验。所有的残差都大于0&#xff0c;小于0&#xff0c;都不正常。残差正常应该是分…

小学校园“闲书”交易平台的设计与实现-计算机毕业设计源码04282

小学校园“闲书”交易平台的设计与实现 摘 要 小学校园“闲书”交易平台是为了解决小学生之间的书籍交流和阅读兴趣培养而设计的。该平台通过使用现代技术手段&#xff0c;如移动应用开发和互联网技术&#xff0c;构建了一个功能齐全的交易平台。平台支持用户注册与登录&#x…

应用于空气和液体抑菌的静态UVC LED抑菌模组-WH-UVC001-VO

WH-UVC001-VO是一款用于空气和液体抑菌的静态UVC LED抑菌模组。适用于带水箱、密闭的腔体结构。可安装于顶部、侧壁及底部&#xff0c;出光面符合IP65的防水要求&#xff0c;即使安装于水箱底部也不用担心漏水。 使用的UVC LED的波长范围为260-280nm&#xff0c;具有优良高效的…