Vue.js中点击href前调用函数失效及实现方案咨询

你的问题核心是：带href的<a>标签点击时，浏览器会优先执行跳转动作，Vue的@click事件还没来得及执行就页面跳转了，导致openWorkflow函数根本没被调用，变量赋值自然也没完成。原方案不可行，得换方式处理。

可行的解决办法 #

方法1：去掉href，在点击函数里手动完成赋值+跳转 #

直接删掉<a>的href属性，把跳转逻辑整合到openWorkflow函数中：

<a @click="openWorkflow(rec.id)">Edit</a>

对应的函数代码：

openWorkflow(id) {
  // 给父组件目标变量赋值
  this.$parent.varName = id;
  // 手动跳转到目标页面
  // 用Vue Router的话优先用这个
  this.$router.push('/workflows');
  // 不用Vue Router的话用原生跳转
  // window.location.href = '#/workflows';
}

这种方式完全由你控制执行顺序，不会出现事件冲突。

方法2：阻止默认跳转，执行完赋值再手动跳转 #

保留href，但在点击事件里先阻止浏览器的默认跳转行为，完成赋值后再手动触发跳转：

<a @click="openWorkflow(rec.id, $event)" href="#/workflows">Edit</a>

函数代码：

openWorkflow(id, e) {
  // 阻止a标签的默认跳转行为
  e.preventDefault();
  // 给父组件目标变量赋值
  this.$parent.varName = id;
  // 手动跳转页面
  window.location.href = '#/workflows';
  // 或者用Vue Router：this.$router.push('/workflows');
}

方法3：用Vue Router的<router-link>组件（推荐） #

如果项目里用了Vue Router，直接用官方的<router-link>组件，它的跳转逻辑由Vue控制，会等@click事件执行完再跳转：

<router-link to="/workflows" @click="openWorkflow(rec.id)">Edit</router-link>

函数里只需要完成赋值即可：

openWorkflow(id) {
  this.$parent.varName = id;
}

额外建议 #

通过this.$parent传递变量不太靠谱，一旦组件层级变动，代码就会失效。更稳妥的方式是用路由传参：
比如跳转时把id放到路由参数里：

openWorkflow(id) {
  this.$router.push({
    path: '/workflows',
    query: { workflowId: id } // query参数刷新页面不会丢失
    // 也可用params：params: { workflowId: id }，但需要路由配置中提前定义参数
  });
}

新页面里直接从路由获取参数：

// 新页面组件内
mounted() {
  const workflowId = this.$route.query.workflowId;
  // 后续业务逻辑直接使用该id即可
}

或者用Vuex/Pinia这类状态管理工具存储变量，跨页面访问更稳定。

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