vue 跳转新窗口的方法

news2024/7/6 20:18:20

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.coloradmin.cn/o/1891254.html

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

相关文章

swiftui中常用组件picker的使用,以及它的可选样式

一个可选项列表就是一个picker组件搞出来的&#xff0c;它有多个样式可以选择&#xff0c;并且可以传递进去一些可选数据&#xff0c;有点像前端页面里面的seleted组件&#xff0c;但是picker组件的样式可以更多。可以看官方英文文档&#xff1a;PickerStyle | Apple Developer…

1分钟了解,预写日志WAL的核心思路...

上一篇《刷盘&#xff0c;还是不刷盘&#xff0c;是一个问题》中我们遇到了哪些问题&#xff1f; 1. 已提交事务未提交事务的ACID特性怎么保证&#xff1f; 画外音&#xff1a;上一篇中遇到的问题&#xff0c;主要是原子性与持久性。 2. 数据库崩溃&#xff0c;怎么实施故障恢复…

Python28-5 k-means算法

k-means 算法介绍 k-means 算法是一种经典的聚类算法&#xff0c;其目的是将数据集分成 ( k ) 个不同的簇&#xff0c;每个簇内的数据点尽可能接近。算法的基本思想是通过反复迭代优化簇中心的位置&#xff0c;使得每个簇内的点与簇中心的距离之和最小。k-means 算法的具体步骤…

如何使用ECharts和Java接口实现可视化的数据挖掘

如何使用ECharts和Java接口实现可视化的数据挖掘 【引言】 随着大数据时代的到来&#xff0c;数据挖掘成为了一项重要的技术&#xff0c;在企业决策、市场分析等领域发挥着重要作用。数据挖掘需要将大量的数据进行分析和展示&#xff0c;而可视化是一种直观、形象的展示方式。…

【kafka】可视化工具cmak(原kafka-manager)安装问题解决

众所周知&#xff08;反正不管你知不知道&#xff09;&#xff0c;kafka-maneger更名了&#xff0c;现在叫cmak&#xff01;原因是什么呢&#xff1f;据不可靠小道信息说&#xff0c;原kafka-manager这个名字涉及到kafka商标使用问题&#xff0c;应该是被律师函警告了&#xff…

DeepFaceLive----AI换脸简单使用

非常强大的软件,官方github https://github.com/iperov/DeepFaceLive 百度云链接: 链接&#xff1a;https://pan.baidu.com/s/1VHY-wxqJXSh5lCn1c4whZg 提取码&#xff1a;nhev 1下载解压软件 下载完成后双击.exe文件进行解压.完成后双击.bat文件打开软件 2 视频使用图片换…

零基础入门GIS开发,必看实用教程【附智慧校园实战笔记源码】

GIS开发也叫webgis&#xff0c;web就是指网页端&#xff0c;所以GIS开发大部分情况下是指网页端的地图可视化开发。 因此GIS开发需要学习前端开发HTML/CSS/JS&#xff0c;以及一些常见的前端框架&#xff0c;例如vue和react等&#xff08;新中地教育通常是教vue&#xff0c;其…

【Kafka】记录一次Kafka消费者重复消费问题

文章目录 现象业务背景排查过程Push与Pull 现象 用户反馈消费者出现消息积压&#xff0c;并且通过日志看&#xff0c;一直重复消费&#xff0c;且没有报错日志。 业务背景 用户的消费者是一个将文件做Embedding的任务&#xff0c;&#xff08;由于AI技术的兴起&#xff0c;大…

Windows下Visual Studio 中配置第一个CUDA工程

今天整NVIDIA 的CUDA 安装和第一个CUDA 代码&#xff0c;顺便添加一个有CUDA工程的空框架。 &#xff08;1&#xff09;首先确认自己的CUDA 已经安装成功 >>cmd 进入命令窗&#xff0c;在窗口输入查看cuda 是否安装成功&#xff0c;能查到CUDA的版本号&#xff0c;表示安…

2.WeBASE一键部署

一、官方文档 一键部署可以在 同机 快速搭建WeBASE管理台环境&#xff0c;方便用户快速体验WeBASE管理平台。 一键部署会搭建&#xff1a;节点&#xff08;FISCO-BCOS 2.0&#xff09;、管理平台&#xff08;WeBASE-Web&#xff09;、节点管理子系统&#xff08;WeBASE-Node-…

统计信号处理基础 习题解答11-11

题目 考虑矢量MAP估计量 证明这个估计量对于代价函数 使贝叶斯风险最小。其中&#xff1a;, &#xff0c;且. 解答 贝叶斯风险函数&#xff1a; 基于概率密度的非负特性&#xff0c;上述对积分要求最小&#xff0c;那就需要内层积分达到最小。令内层积分为&#xff1a; 上述积…

视频批量剪辑一键垂直翻转,轻松转换格式为mov,视频制作从此事半功倍!

在视频制作的海洋中&#xff0c;我们时常需要面对各种挑战&#xff0c;其中之一就是视频的翻转与调整。不论是出于创意需求还是格式转换的需要&#xff0c;视频翻转都是一个不可或缺的功能。今天&#xff0c;我要向大家介绍一款真正的批量视频翻转神器——视频剪辑高手&#xf…

Python高速下载及安装的十大必备事项与C++联调

选择正确的版本&#xff1a; 访问Python官网&#xff08;https://www.python.org/&#xff09;下载最新稳定版本&#xff0c;目前最新稳定版本为3.12.4 避免下载并安装Python 2.x版本&#xff0c;因为它已经停止维护。 选择适合操作系统的安装包&#xff1a; 根据你的操作系…

2.4 C#开发环境 xml格式保存参数----范例实现

2.4C#开发环境 xml格式保存参数----范例实现 1 程序参数保存目录层次说明 1 选择程序号| 相机号|窗口号 2 导入参数&#xff1a;就会从本地目录读取参数&#xff0c;并且显示图片和ROI 3 保存参数&#xff1a;把当前控件图片和ROI信息保存到指定程序号|相机号|窗口号中 2 参数…

Xilinx FPGA:vivado单端RAM实现输出偶数(单端RAM的简单应用)

一、实验步骤 &#xff08;1&#xff09;先创建一个工程 &#xff08;2&#xff09;调用IP资源找到RAMs&ROMs&BRAMs&#xff0c;选择其中的块资源 &#xff08;3&#xff09;修改配置参数 timescale 1ns / 1ps //写入0-99的数据&#xff0c;读出偶数 module single_ra…

MeEdu网校系统搜索功能问题处理

MeEdu通过 MeiliSearch 实现全文搜索服务。 一、下载 MeiliSearch 程序 https://github.com/meilisearch/MeiliSearch/releases/tag/v0.24.0 只能下载 v0.24.0 版本&#xff0c;其版本不支持 下载 meilisearch-linux-amd64就可以了 二、上传 MeiliSearch 三、启动命令如下…

如何用简单的html,css,js写出一个带有背景层的删除弹出框

虽然每次项目都是主要写后端&#xff0c;但是有时候前端的样式太丑了&#xff0c;也有点看不下去。弹出框是项目中用的比较多的&#xff0c;比如删除&#xff0c;修改或者添加什么的&#xff0c;都需要一个弹出框。 所以这里简单记录一下&#xff0c;应该如何实现。实现效果如…

threejs 微信小程序原生版本的使用 obj模型的加载

直接上代码&#xff0c; <canvas class"webgl" type"webgl" id"gl" bindtouchstart"onTX" bindtouchend"onTX" bindtouchmove"onTX" style"width:100vw;height:90vh"></canvas> const co…

手写starter写核心

文章目录 使用cn.smart 不能使用com 避免在yml配置的时候 开启或者 写万能接口实现调整日志级别写了core核心 但是没有引入其他功能组件,就是注解可以使用但是功能没有增,所以core的作用就是写入注解从新写starter 第一步提取注解 写到核心包里面,看其他包 新建模块 使用cn.s…

5分钟教你部署MySQL8.0环境

此方法基于Windows操作系统&#xff01; 一、在MySQL官网单击downloads&#xff08;下载&#xff09;MySQLhttps://www.mysql.com/cn/ 选择在Windows操作系统下载 二、选择合适的版本 推荐下载第二种&#xff0c;安装时离线安装即可 三、安装MySQL8.0 1、找到MySQL下载完成…