vue链接跳转

news2024/11/13 1:40:14

在 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>