vue链接跳转

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

方法 1：使用 @click 和 window.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：使用 @click 和 window.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 中实现外链跳转。