Vue.js中点击元素跳转至外部URL失败问题求助

你用this.$router.push没用是因为这个方法是Vue Router用来跳转单页应用内部路由的，外部网页得用浏览器原生的跳转方式，下面给你两种可行方案：

方案1：直接在click事件中添加跳转逻辑 #

把跳转代码直接写在@click的事件列表里，和现有逻辑用逗号分隔：

<h3 :class="{'active': game.Desktop}"
    @click="game.gameAchievements = false, game.gameCreation = false, enJin.audioController.play('take'), window.location.href='https://你的目标网址.com'"
    @mouseenter="enJin.audioController.play('cardHover')">
  Desktop App
</h3>

如果需要在新窗口打开，把window.location.href换成window.open('https://你的目标网址.com', '_blank')即可。

方案2：抽成方法（更易维护） #

如果逻辑较多，建议把点击事件抽成组件方法，代码更清晰：

<template>
  <h3 :class="{'active': game.Desktop}"
      @click="handleDesktopClick"
      @mouseenter="enJin.audioController.play('cardHover')">
    Desktop App
  </h3>
</template>

<script>
export default {
  methods: {
    handleDesktopClick() {
      // 执行原有逻辑
      game.gameAchievements = false;
      game.gameCreation = false;
      enJin.audioController.play('take');
      
      // 跳转外部网页
      window.location.href = 'https://你的目标网址.com';
      // 新窗口打开用这个：
      // window.open('https://你的目标网址.com', '_blank');
    }
  }
}
</script>

核心原因：Vue Router的$router.push仅能处理应用内部的路由路径（比如/home这类），无法识别外部域名的网址，所以必须依赖浏览器原生的window.location或window.open来实现外部跳转。

内容的提问来源于stack exchange，提问作者spjdev