当前位置: 首页 > news >正文

vue链接跳转

在 Vue 3 的组合式 API 中,你可以使用 refsetup 函数来实现外部链接跳转功能。

方法 1:使用 @clickwindow.open(新标签页跳转)

这种方式在点击时会打开一个新标签页并跳转到外部链接。

<menu-item value="item2" @click="openExternalLink"> 更新日志 </menu-item>
<script setup>
import { ref } from 'vue';function openExternalLink() {window.open('https://your-external-link.com', '_blank'); // 在新标签页中打开
}
</script>

方法 2:使用 @clickwindow.location.href(当前页面跳转)

如果希望在当前页面跳转到外部链接,可以使用 window.location.href

<menu-item value="item2" @click="redirectToExternalLink"> 更新日志 </menu-item>
<script setup>
function redirectToExternalLink() {window.location.href = 'https://your-external-link.com';
}
</script>

方法 3:使用 a 标签包裹 t-menu-item

如果你的 <t-menu-item> 允许直接用 <a> 标签包裹,你也可以直接使用 <a> 标签。这种方式不需要任何 JavaScript 方法,简单直接。

<a href="https://your-external-link.com" target="_blank"><menu-item value="item2"> 更新日志 </menu-item>
</a>

方法 4:定义链接 URL 作为 ref,然后在 @click 中使用它

如果你想将链接作为一个变量,可以用 ref 定义,然后在 @click 中引用它。这种方式在你需要动态改变链接地址时尤其有用。

<menu-item value="item2" @click="openExternalLink"> 更新日志 </menu-item>
<script setup>
import { ref } from 'vue';const linkUrl = ref('https://your-external-link.com');function openExternalLink() {window.open(linkUrl.value, '_blank'); // 使用 ref 中的链接在新标签页打开
}
</script>

总结

  • 新标签页打开:使用 window.open(url, '_blank')
  • 当前页面打开:使用 window.location.href = url
  • 直接使用 <a> 标签:简单场景中最直接的方式。

选择其中一种方式,根据需求在组合式 API 中实现外链跳转。

相关文章:

vue链接跳转

在 Vue 3 的组合式 API 中&#xff0c;你可以使用 ref 和 setup 函数来实现外部链接跳转功能。 方法 1&#xff1a;使用 click 和 window.open&#xff08;新标签页跳转&#xff09; 这种方式在点击时会打开一个新标签页并跳转到外部链接。 <menu-item value"item2&…...

IP地址是电脑自带的吗?是根据什么而决定的‌

IP地址并非电脑自带&#xff0c;而是由网络运营商或网络服务提供商通过特定的协议和机制进行分配和管理的。要深入理解IP地址的来源和决定因素&#xff0c;我们需要从IP地址的基本概念、分配方式以及影响分配的因素等多个方面进行探讨。 IP地址&#xff0c;即互联网协议地址&am…...

JavaFX史上最全教程 - Shape - JavaFX矩形椭圆

avaFX Shape类定义了常见的形状&#xff0c;如线&#xff0c;矩形&#xff0c;圆&#xff0c;Arc&#xff0c;CubicCurve&#xff0c;Ellipse和QuadCurve。 在场景图上绘制矩形需要宽度&#xff0c;高度和左上角的&#xff08;x&#xff0c;y&#xff09;位置。 要在JavaFX中…...

SpringBoot实现的企业资产管理系统

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…...

python-读写Excel:openpyxl-(4)下拉选项设置

使用openpyxl库的DataValidation对象方法可添加下拉选择列表。 DataValidation参数说明&#xff1a; type&#xff1a; 数据类型("whole", "decimal", "list", "date", "time", "textLength", "custom"…...

【C++】详解RAII思想与智能指针

&#x1f308; 个人主页&#xff1a;谁在夜里看海. &#x1f525; 个人专栏&#xff1a;《C系列》《Linux系列》 ⛰️ 丢掉幻想&#xff0c;准备斗争 目录 引言 内存泄漏 内存泄漏的危害 内存泄漏的处理 一、RAII思想 二、智能指针 1.auto_ptr 实现原理 模拟实现 弊端…...

Qt 环境实现视频和音频播放

在这个示例中&#xff0c;我们将使用 FFmpeg 进行视频和音频的解码&#xff0c;并使用 Qt 的界面进行显示和控制。为了实现音频和视频的解码以及同步显示&#xff0c;我们需要使用 FFmpeg 的解码库进行视频和音频解码&#xff0c;使用 Qt 的 QLabel 显示解码后的视频帧&#xf…...

【人工智能训练师】7 大数据处理与应用

大数据处理与应用&#xff08;Hive技术&#xff09;(0/100分) 1.本地开发工具连接Hadoop集群 1.本次环境版本为Hadoop2.7.7&#xff0c;对应eclips插件存放于云主机master:/usr/package277/中。 2.本机映射名为hadoop000&#xff0c;云主机Hadoop/Hive的hosts文件中IP需要修改…...

nginx配置文件介绍及示例

一、nginx配置文件一共有main&#xff0c;http&#xff0c;server&#xff0c;location&#xff0c;upstream&#xff0c;stream&#xff0c;events7个块。 step 1: main 块 作用&#xff1a;main 块是 Nginx 配置文件的顶级块&#xff0c;用于设置一些全局的参数和配置&…...

如何在算家云搭建YOLOv5(物体检测)

一、YOLOv5简介 YOLOv5 模型是一种以实时物体检测闻名的计算机视觉模型&#xff0c;由 Ultralytics 开发&#xff0c;并于 2020 年年中发布。它是 YOLO 系列的升级版&#xff0c;继承了 YOLO 系列以实时物体检测能力而著称的特点。 二、模型搭建流程 1.选择模型实例 在应用…...

现场工程师日记-MSYS2迅速部署PostgreSQL主从备份数据库

文章目录 一、概要二、整体架构流程1. 安装 MSYS2 环境2. 安装postgresql 三、技术名词解释1.MSYS22.postgresql 四、技术细节1. 创建主数据库2.添加从数据库复制权限3. 按需修改参数&#xff08;1&#xff09;WAL保留空间&#xff08;2&#xff09;监听地址 4. 启动主服务器5.…...

使用Element UI实现一个拖拽图片上传,并可以Ctrl + V获取图片实现文件上传

要在 Element UI 的拖拽上传组件中实现 Ctrl V 图片上传功能&#xff0c;可以通过监听键盘事件来捕获粘贴操作&#xff0c;并将粘贴的图片数据上传到服务器。 版本V1&#xff0c;实现获取粘贴板中的文件 注意&#xff0c;本案例需要再你已经安装了Element UI并在项目中正确配…...

私域流量圈层在新消费时代的机遇与挑战:兼论开源 AI 智能名片、2 + 1 链动模式、S2B2C 商城小程序的应用

摘要&#xff1a;本文剖析了私域流量圈层在新消费时代呈现出的独特温度与信任优势&#xff0c;阐述了从传统销售到新消费转型中用户心理的变化。同时&#xff0c;强调了内容对于私域流量的关键作用&#xff0c;并分析开源 AI 智能名片、2 1 链动模式、S2B2C 商城小程序在私域流…...

vxe-vxe-colgroup后端返回数据 对数据进行处理 动态合并分组表头(v-if控制表格渲染(数据请求完成后渲染))

1.html vxe-colgroup循环合并数据&#xff1b;v-if控制表格渲染&#xff08;数据请求完成后渲染&#xff09; <template><vxe-table v-if"isTableReady" :data"tableData"><vxe-colgroup title"基本信息"><template v-for…...

ESLint 使用教程(五):从输入 eslint 命令到最终代码被处理,ESLint 中间究竟做了什么工作

前言 ESLint 是现代 JavaScript 开发中不可或缺的代码质量工具。它能够帮助开发者找到并修复代码中的问题&#xff0c;提升代码的可维护性。但是&#xff0c;你可能会好奇&#xff1a;从我们在终端里输入 eslint 命令到最终代码被处理&#xff0c;ESLint 中间究竟做了什么工作…...

【安全测试】sqlmap工具(sql注入)学习

前言&#xff1a;sqimap是一个开源的渗透测试工具&#xff0c;它可以自动化检测和利用SQL注入缺陷以及接管数据库服务器的过程。它有一个强大的检测引擎&#xff0c;许多适合于终极渗透测试的小众特性和广泛的开关&#xff0c;从数据库指纹、从数据库获 取数据到访问底层文件系…...

YOLOv11融合CVPR[2023]空间和通道重建卷积ScConv模块及相关改进思路|YOLO改进最简教程

YOLOv11v10v8使用教程&#xff1a; YOLOv11入门到入土使用教程 YOLOv11改进汇总贴&#xff1a;YOLOv11及自研模型更新汇总 《SCConv: Spatial and Channel Reconstruction Convolution for Feature Redundancy》 一、 模块介绍 论文链接&#xff1a;SCConv: Spatial and Cha…...

C++研发笔记13——C语言程序设计初阶学习笔记11

从今天开始我们开始第三模块《分支语句和循环语句》的学习&#xff0c;在本模块中我们将会涉及到以下9个内容&#xff1a;什么是语句、分支语句——if语言、分支语句——switch语句、循环语句——while循环、循环语句——for循环、循环语句——do while循环、折半查找算法、猜数…...

html5拖放

1、什么是拖放&#xff08;Drag 和 Drop&#xff09; 拖放&#xff0c;字面意思就是拖动&#xff0c;放置 在编程里面也是如此,拖放是一种常见的特性&#xff0c;即抓取对象以后拖到另一个位置。 在 HTML5 中&#xff0c;拖放是标准的一部分&#xff0c;任何元素都能够拖放。…...

卫导调零天线功率倒置算法原理及MATLAB仿真

卫导调零天线功率倒置算法原理及MATLAB仿真 文章目录 前言一、调零天线简介二、功率倒置自适应算法三、MATLAB仿真四、MATLAB代码总结 前言 \;\;\;\;\; 自适应调零抗干扰技术可以很大程度改善导航抗干扰性能&#xff0c;也是目前导航抗干扰技术中不可或缺的&#xff0c;其研究意…...

【划分型 DP】力扣139. 单词拆分

给你一个字符串 s 和一个字符串列表 wordDict 作为字典。如果可以利用字典中出现的一个或多个单词拼接出 s 则返回 true。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 示例 1&#xff1a; 输入: s “leetcode”, wordDic…...

Python学习从0到1 day26 第三阶段 Spark ④ 数据输出

半山腰太挤了&#xff0c;你该去山顶看看 —— 24.11.10 一、输出为python对象 1.collect算子 功能: 将RDD各个分区内的数据&#xff0c;统一收集到Driver中&#xff0c;形成一个List对象 语法&#xff1a; rdd.collect() 返回值是一个list列表 示例&#xff1a; from …...

AWTK fscript 中的 JSON 扩展函数

fscript 是 AWTK 内置的脚本引擎&#xff0c;开发者可以在 UI XML 文件中直接嵌入 fscript 脚本&#xff0c;提高开发效率。本文介绍一下 fscript 中的 ** JSON 扩展函数 ** 1.json_load 加载 json 数据。 原型 json_load(str) > object json_load(binary) > object js…...

动态规划 —— dp 问题-买卖股票的最佳时机III

1. 买卖股票的最佳时机III 题目链接&#xff1a; 123. 买卖股票的最佳时机 III - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iii/description/ 2. 题目解析 3. 算法原理 状态表示&#xff1a;以某一个位置为结尾或者…...

“绽放艺术风采、激发强国力量” 海南省第十一届中小学生艺术展演活动圆满开展

2024年11月1日&#xff0c;由省教育厅主办、琼台师范学院承办的海南省第十一届中小学生艺术展演省级展演活动在海口正式拉开帷幕。来自全省各市县、省属学校等共计4000余名师生参加本届中小学生艺术展演现场展演活动。 本届展演活动以“绽放艺术风采、激发强国力量”为主题&…...

Linux之文件和目录类命令详解(2)

Linux之文件和目录类命令详解&#xff08;2&#xff09; 1、mv-移动文件或重命名2、find-查找文件和目录3、locate-快速查找文件4、du-显示目录或文件的磁盘使用情况5、df-显示文件系统的磁盘空间使用情况6、chmod-更改文件或目录的权限7、chown-更改文件或目录的拥有者8、tree…...

NVR管理平台EasyNVR多品牌NVR管理工具/设备摄像头开启ONVIF的方法

NVR小程序接入平台EasyNVR作为一款功能强大的安防视频监控平台&#xff0c;以其出色的兼容性和灵活性&#xff0c;在智慧校园、智慧工厂、智慧水利等多个场景中得到了广泛应用。本文将重点介绍如何为大华摄像头开启ONVIF协议&#xff0c;以便与EasyNVR进行无缝对接。 大华大部分…...

Pr 视频过渡:沉浸式视频

效果面板/视频过渡/沉浸式视频 Video Transitions/Immersive Video Adobe Premiere Pro 的视频过渡效果中&#xff0c;沉浸式视频 Immersive Video效果组主要用于 VR 视频剪辑之间的过渡。 自动 VR 属性 Auto VR Properties是所有 VR 视频过渡效果的通用选项。 默认勾选&#x…...

SwiftUI开发教程系列 - 第1章:简介与环境配置

1.1 SwiftUI简介 SwiftUI 是 Apple 于 2019 年推出的声明式用户界面框架&#xff0c;旨在简化 iOS、macOS、watchOS 和 tvOS 应用的 UI 开发。与 UIKit 的命令式编程方式不同&#xff0c;SwiftUI 提供了一种声明式语法&#xff0c;让开发者可以以更加直观、简洁的方式构建 UI。…...

gitlab ci/cd搭建及使用笔记

记录下使用gitlab的ci/cd的devops构建过程中&#xff0c;一些易忘点或者踩坑点&#xff1a; 官方文档中英文&#xff08;建议英文&#xff09; https://docs.gitlab.com/ee/ci/yaml/artifacts_reports.html https://gitlab.cn/docs/jh/ci/pipelines/schedules.html为什么创建了…...

卫生计生加强门户网站建设/qq群推广网站免费

http://ac.jobdu.com/problem.php?pid1123 题目描述&#xff1a;辰辰是个很有潜能、天资聪颖的孩子&#xff0c;他的梦想是称为世界上最伟大的医师。为此&#xff0c;他想拜附近最有威望的医师为师。医师为了判断他的资质&#xff0c;给他出了一个难题。医师把他带到个到处都是…...

软件之家/电商网站seo

grep, egrep, fgrep - print lines matching a pattern #过滤文本、 1. 2.^和$ #^表示以什么为开头 $表示为以什么结尾...

成都网站设计费用/知识营销

题目: 判断一个链表是否为回文结构。如果链表长度为N&#xff0c;时间复杂度为O(N)&#xff0c;空间复杂度为O(1) 分析&#xff1a; 方法1&#xff1a;使用栈&#xff0c;需要O(N)的额外空间 1.将链表中节点的值全部存入栈中&#xff0c; 2.根据栈先进后出的特性&#xff0c;和…...

区政府网站建设方案/最新百度新闻

之前便一直想把它整理出来, 可惜这除了懒就剩下了更懒 , 所以才拖到现在~希望可以对大家有那么一点的帮助~ ---阿鸟 …...

建设手机网站/昆山网站建设公司

本文将覆盖 二分 哈希表 堆 优先队列 方面的面试算法题&#xff0c;文中我将给出&#xff1a; 面试中的题目解题的思路特定问题的技巧和注意事项考察的知识点及其概念详细的代码和解析 在开始之前&#xff0c;我们先看下会有哪些重点内容&#xff1a; 现在就让我们开始吧&a…...

wordpress站长工作/企业宣传软文

链接&#xff1a;https://ac.nowcoder.com/acm/contest/553/C来源&#xff1a;牛客网 题目描述 Chino的数学很差&#xff0c;因此Cocoa非常担心。今天&#xff0c;Cocoa准备教Chino和排队有关的问题。 我们总是会学各种排列组合的问题&#xff0c;那些题目大多数都是套路。而C…...