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

相关推荐
东华帝君1 分钟前
React Suspense组件
前端
siaikin1 分钟前
基于 Astro Starlight 的多框架文档
前端·vue.js·markdown
用户40511197831833 分钟前
JSAR 粒子系统实战:打造炫酷 3D 烟花秀
javascript
红毛丹3 分钟前
在 Playwright 中执行 JavaScript
前端·自动化运维
一树山茶3 分钟前
uniapp云函数使用——内容审核
前端·javascript
西西学代码8 分钟前
Flutter---坐标网格图标
前端·javascript·flutter
用户21411832636029 分钟前
假期值班,困在形式主义里的“假坚守”
前端
Chloe_lll12 分钟前
threejs(五)纹理贴图、顶点UV坐标
javascript·贴图·uv
需要兼职养活自己14 分钟前
react【portals】与vue3【<Teleport>】
前端·react.js
用户479492835691515 分钟前
React 19.2 重磅更新:终于解决 useEffect 依赖数组难题
前端·react.js