Vue3中子组件emit触发父组件router.push()无法跳转问题求助

1. 先确认emit传递的参数是否正确 #

在handleRoute函数里新增日志，检查子组件传过来的value和按钮触发时的参数是否一致：

function handleRoute(value: string) {
  console.log('接收的参数:', value); // 新增这行
  let url = `/company/sites/${value}`;

  console.log('目标URL:', url);

  router.push(url)
    .then(() => {
      console.log('导航成功回调触发!');
    })
    .catch((error) => {
      console.error('导航失败:', error);
  });
}

如果emit传的value和当前路由的参数完全相同，router.push不会修改URL，但会正常进入then回调（Vue Router 4默认允许重复导航到同一路由）。这种情况要确保子组件传递的是新的有效ID。

2. 排查子组件点击事件的干扰 #

如果子组件SiteCard内部的handleCardClick函数里调用了event.preventDefault()或event.stopPropagation()，可能会间接影响路由行为（比如和其他DOM事件冲突）。可以暂时注释子组件里的相关阻止代码，测试是否恢复正常。

3. 强制触发路由更新（针对同参数场景） #

如果确实需要刷新同路径的路由，给router.push添加force: true参数强制更新：

router.push({ path: url, force: true })

或者用replace替换当前路由记录：

router.replace(url)

4. 验证路由实例的一致性 #

确保handleRoute里的router是通过useRouter()获取的全局实例，而不是局部创建的新实例：

import { useRouter } from 'vue-router';

const router = useRouter(); // 确认这行在组件的setup函数内正确调用

5. 检查路由配置的匹配度 #

确认路由定义的路径和生成的url完全匹配，比如路由配置是否为：

{
  path: '/company/sites/:siteId',
  component: SiteDetail,
  // 其他配置项
}

如果路由存在嵌套、重定向或别名，可能导致URL显示不符合预期。

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