如何根据API响应从首页路由至Page A或Page B？

核心思路 #

给每个项目列表项绑定点击事件，触发时先发起GET API请求，等待响应返回后，根据响应中的布尔字段值，决定重定向到Page A或Page B。

原生JavaScript实现 #

适用于无框架的静态页面：

<!-- 项目列表结构 -->
<ul id="projectList">
  <li data-project-id="1">项目1</li>
  <li data-project-id="2">项目2</li>
</ul>

<script>
// 事件委托绑定点击事件，避免重复绑定
document.getElementById('projectList').addEventListener('click', async (e) => {
  if (!e.target.matches('#projectList li')) return;
  
  const projectId = e.target.dataset.projectId;
  try {
    // 发起API请求
    const res = await fetch(`/api/projects/${projectId}`);
    const projectData = await res.json();
    
    // 根据布尔字段判断跳转目标
    const targetPage = projectData.yourBooleanField ? '/page-a' : '/page-b';
    window.location.href = targetPage;
  } catch (error) {
    console.error('API请求失败:', error);
    // 可添加用户提示：比如 alert('项目信息加载失败，请重试')
  }
});
</script>

React + React Router实现 #

适用于React单页应用：

import { useNavigate } from 'react-router-dom';

function ProjectList({ projects }) {
  const navigate = useNavigate();

  const handleClick = async (projectId) => {
    try {
      const res = await fetch(`/api/projects/${projectId}`);
      const data = await res.json();
      
      // 根据布尔字段跳转
      data.yourBooleanField ? navigate('/page-a') : navigate('/page-b');
    } catch (err) {
      console.error('请求出错:', err);
    }
  };

  return (
    <ul>
      {projects.map(proj => (
        <li key={proj.id} onClick={() => handleClick(proj.id)}>
          {proj.name}
        </li>
      ))}
    </ul>
  );
}

Vue 3 + Vue Router实现 #

适用于Vue单页应用：

<template>
  <ul>
    <li v-for="proj in projects" :key="proj.id" @click="handleProjectClick(proj.id)">
      {{ proj.name }}
    </li>
  </ul>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

// 示例项目数据
const projects = [
  { id: 1, name: '项目1' },
  { id: 2, name: '项目2' }
];

const handleProjectClick = async (projectId) => {
  try {
    const res = await fetch(`/api/projects/${projectId}`);
    const data = await res.json();
    
    // 根据布尔字段路由跳转
    const target = data.yourBooleanField ? '/page-a' : '/page-b';
    router.push(target);
  } catch (err) {
    console.error('请求失败:', err);
  }
};
</script>

注意事项 #

• 替换代码中的yourBooleanField为API响应实际返回的布尔字段名
• 务必处理请求失败的异常情况，避免用户操作后无反馈
• 单页应用优先使用框架路由方法（如navigate/router.push），而非window.location，以保留SPA特性
• 可在请求过程中添加加载状态（如按钮置灰、loading动画），提升用户体验

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