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 中实现外链跳转。

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

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

相关文章

重学 Android 自定义 View 系列(三):自定义步数进度条

前言 本篇文章主要是实现仿QQ步数View&#xff0c;很老的一个View了&#xff0c;但技术永不落后&#xff0c;开搂&#xff01; 最终效果如下&#xff1a; 1. 结构分析 QQStepView 主要由三个元素组成&#xff1a; 显示一个圆环进度条&#xff0c;通过外环和内环的角度变化来…

Spring中的过滤器和拦截器

Spring中的过滤器和拦截器 一、引言 在Spring框架中&#xff0c;过滤器&#xff08;Filter&#xff09;和拦截器&#xff08;Interceptor&#xff09;是实现请求处理的两种重要机制。它们都基于AOP&#xff08;面向切面编程&#xff09;思想&#xff0c;用于在请求的生命周期…

查缺补漏----用户上网过程(HTTP,DNS与ARP)

&#xff08;1&#xff09;HTTP 来自湖科大计算机网络微课堂&#xff1a; ① HTTP/1.0采用非持续连接方式。在该方式下&#xff0c;每次浏览器要请求一个文件都要与服务器建立TCP连接当收到响应后就立即关闭连接。 每请求一个文档就要有两倍的RTT的开销。若一个网页上有很多引…

C++之vector类的模拟实现

片头 嗨~小伙伴们&#xff0c;今天我们来一起学习关于C的vector类的模拟实现&#xff0c;准备好了吗&#xff1f;咱们开始咯~ 一、基本框架 namespace bit {template<class T>class vector {public:typedef T* iterator;typedef const T* const_iterator;// 针对const修…

流体力学ansys Fluent二次开发scheme_eval模块剖析

在ANSYS Fluent的二次开发中&#xff0c;scheme_eval 是 Scheme 编程语言中一个非常重要的模块&#xff0c;它允许用户执行动态的 Scheme 表达式和函数&#xff0c;从而扩展 Fluent 的功能。scheme_eval 模块通常与 Fluent 的计算和自定义脚本操作紧密结合。下面我们会对这个模…

前端入门一之DOM、获取元素、DOM核心、事件高级、操作元素、事件基础、节点操作

前言 JS是前端三件套之一&#xff0c;也是核心&#xff0c;本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点&#xff0c;这篇是DOM;这篇文章是本人大一学习前端的笔记&#xff1b;欢迎点赞 收藏 关注&#xff0c;本人将会持续更新。 文章目录 DOMDOM简介1.1、什么是DOM1…

ubuntu 22.04 server 安装 和 初始化 LTS

ubuntu 22.04 server 安装 和 初始化 下载地址 https://releases.ubuntu.com/jammy/ 使用的镜像是 ubuntu-22.04.5-live-server-amd64.iso usb 启动盘制作工具 https://rufus.ie/zh/ rufus-4.6p.exe 需要主板 支持 UEFI 启动 Ubuntu22.04.4-server安装 流程 https://b…

【elkb】kibana后台删除索引

打开kibana后台 点击 Management ---> Index Management 找到要删除的所以点击 点击delete index 删除成功

【计网】实现reactor反应堆模型 --- 多线程方案优化 ,OTOL方案

没有一颗星&#xff0c; 会因为追求梦想而受伤&#xff0c; 当你真心渴望某样东西时&#xff0c; 整个宇宙都会来帮忙。 --- 保罗・戈埃罗 《牧羊少年奇幻之旅》--- 实现Reactor反应堆模型 1 重新认识Reactor2 普通线程池3 OTOL方案3.1 多进程版3.2 多线程版 1 重新认识Re…

langgraph_plan_and_execute

整体入门demo 教程概览 欢迎来到LangGraph教程&#xff01; 这些笔记本通过构建各种语言代理和应用程序&#xff0c;介绍了如何使用LangGraph。 快速入门&#xff08;Quick Start&#xff09; 快速入门部分通过一个全面的入门教程&#xff0c;帮助您从零开始构建一个代理&a…

UnixBench和Geekbench进行服务器跑分

1 概述 服务器的基准测试&#xff0c;常见的测试工具有UnixBench、Geekbench、sysbench等。本文主要介绍UnixBench和Geekbench。 1.1 UnixBench UnixBench是一款开源的测试UNIX系统基本性能的工具&#xff08;https://github.com/kdlucas/byte-unixbench&#xff09;&#x…

布谷直播源码部署服务器关于数据库配置的详细说明

布谷直播源码搭建部署配置接口数据库 /public/db.php&#xff08;2019年8月后的系统在该路径下配置数据库&#xff0c;老版本继续走下面的操作&#xff09; 在项目代码中执行命令安装依赖库&#xff08;⚠️注意&#xff1a;如果已经有了vendor内的依赖文件的就不用执行了&am…

Gen-RecSys——一个通过生成和大规模语言模型发展起来的推荐系统

概述 生成模型的进步对推荐系统的发展产生了重大影响。传统的推荐系统是 “狭隘的专家”&#xff0c;只能捕捉特定领域内的用户偏好和项目特征&#xff0c;而现在生成模型增强了这些系统的功能&#xff0c;据报道&#xff0c;其性能优于传统方法。这些模型为推荐的概念和实施带…

太速科技-440-基于XCVU440的多核处理器多输入芯片验证板卡

基于XCVU440的多核处理器多输入芯片验证板卡 一、板卡概述 本板卡系我司自主研发的基于6U CPCI处理板&#xff0c;适用于多核处理器多输入芯片验证的应用。芯片采用工业级设计。 基于XCVU440T的多核处理器多输入芯片验证板卡基于6U CPCI架构&#xff0c;是单机中的一个…

SpringBoot框架在共享汽车管理中的应用

3系统分析 3.1可行性分析 通过对本共享汽车管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本共享汽车管理系统采用SSM框架&#xff0c;JAVA作为开发语…

【数据分享】1901-2023年我国省市县镇四级的逐年降水数据(免费获取/Shp/Excel格式)

之前我们分享过1901-2023年1km分辨率逐月降水栅格数据和Shp和Excel格式的省市县四级逐月降水数据&#xff0c;原始的逐月降水栅格数据来源于彭守璋学者在国家青藏高原科学数据中心平台上分享的数据&#xff01;基于逐月数据我们采用求年累计值的方法得到逐年降水栅格数据&#…

Javaweb-book书籍借阅系统-开源计划-起源-003

效果视频&#xff1a; https://www.bilibili.com/video/BV1w5m6YkEW3/?spm_id_from333.999.0.0项目地址&#xff1a; https://gitee.com/lucky-six/Javaweb-book

基于springboot+vu的二手车交易系统(全套)

一、系统架构 前端&#xff1a;vue | element-ui | html 后端&#xff1a;springboot | mybatis-plus 环境&#xff1a;jdk1.8 | mysql | maven | nodejs 二、代码及数据库 三、功能介绍 01. web端-首页1 02. web端-首页2 03. web端-注册 04. web端-登录 05. w…

系统架构师2023版:习题

架构设计基础 计算机基础 目前处理器市场中存在 CPU 和 DSP 两种类型的处理器&#xff0c;分别用于不同的场景&#xff0c;这两种处理器具有不同的体系结构&#xff0c;DSP采用()。 A.冯诺依曼结构 B.哈佛结构 C.FPGA 结构 D.与 GPU 相同的结构 解析:…

C++ | Leetcode C++题解之第552题学生出勤记录II

题目&#xff1a; 题解&#xff1a; class Solution { public:static constexpr int MOD 1000000007;vector<vector<long>> pow(vector<vector<long>> mat, int n) {vector<vector<long>> ret {{1, 0, 0, 0, 0, 0}};while (n > 0) {…