vue链接跳转

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

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

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

html 复制代码
<menu-item value="item2" @click="openExternalLink"> 更新日志 </menu-item>
javascript 复制代码
<script setup>
import { ref } from 'vue';

function openExternalLink() {
  window.open('https://your-external-link.com', '_blank'); // 在新标签页中打开
}
</script>

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

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

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

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

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

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

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

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

html 复制代码
<menu-item value="item2" @click="openExternalLink"> 更新日志 </menu-item>
javascript 复制代码
<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 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧12 分钟前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel
好_快20 分钟前
Lodash源码阅读-baseClone
前端·javascript·源码阅读
Double Point20 分钟前
(三十一) Dart 中的网络请求教程:从知乎日报 API 获取数据
前端
excel22 分钟前
webpack 核心编译器 十二 节
前端
好_快22 分钟前
Lodash源码阅读-baseToString
前端·javascript·源码阅读
好_快23 分钟前
Lodash源码阅读-initCloneByTag
前端·javascript·源码阅读
木木黄木木26 分钟前
HTML5重力球动画实现详解
前端·html·html5
好_快26 分钟前
Lodash源码阅读-cloneSymbol
前端·javascript·源码阅读
excel27 分钟前
webpack 核心编译器 十一 节
前端