vue链接跳转

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

方法 1：使用 `@click` 和 `window.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：使用 `@click` 和 `window.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：使用 @click 和 window.open（新标签页跳转）

方法 2：使用 @click 和 window.location.href（当前页面跳转）

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

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

总结

方法 1：使用 `@click` 和 `window.open`（新标签页跳转）

方法 2：使用 `@click` 和 `window.location.href`（当前页面跳转）

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

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