Laravel Vue项目中如何在Vue.js方法中传递URL并通过@click触发页面跳转

我帮你找出了代码里的两个核心问题，直接导致跳转失效和hover状态异常，下面是修正方案和完整代码：

问题分析 #

1. 变量名大小写不匹配：你在data里定义的是goTolink（小写L），但模板里用的是goToLink（大写L），Vue无法识别这个响应式变量，导致hover时的文字切换逻辑完全失效。
2. 跳转方法写法错误：直接写href='http://www.google.com'是无效的，这不是JavaScript触发页面跳转的正确方式，必须使用浏览器的window对象来操作。

修正后的完整代码 #

我还额外优化了组件的灵活性，把跳转链接做成了可传入的props，以后不用改代码就能切换目标站点：

<template>
  <div style="cursor:pointer;" @mouseover="showMe" @mouseout="hideMe" @click="goToMySite">
    <!-- 简化v-show的写法，!goToLink等价于goToLink === false -->
    <h6 v-show="!goToLink">Hover Me</h6>
    <h6 v-show="goToLink"> Click to visit My Site </h6>
  </div>
</template>
<script>
export default {
  props: {
    // 新增props：允许外部传入跳转链接，默认值设为谷歌
    targetUrl: {
      type: String,
      default: 'http://www.google.com'
    }
  },
  data() {
    return {
      // 统一变量名，和模板保持一致
      goToLink: false,
    }
  },
  methods: {
    showMe(){
      this.goToLink = true
    },
    hideMe(){
      this.goToLink = false
    },
    goToMySite(){
      // 方式1：在当前页面跳转
      window.location.href = this.targetUrl;
      
      // 方式2：如果想在新标签页打开，替换成下面这句
      // window.open(this.targetUrl, '_blank');
    }
  }
}
</script>
<style>
</style>

关键改动说明 #

• 统一了响应式变量名goToLink，确保hover时的文字切换正常工作；
• 用window.location.href（当前页面跳转）或window.open（新标签页跳转）实现了正确的页面跳转逻辑；
• 新增targetUrl props，让组件可以灵活接收外部传入的链接，提升复用性；
• 简化了模板里v-show的判断写法，代码更简洁易读。

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