Flutter中如何通过登录按钮结合if-else实现Break与Check页面跳转

步骤1：给Navigate页面的按钮添加跳转参数 #

点击Break/Check按钮时，跳转登录页面携带目标页面标识参数，通过URL query传递即可：

• Break按钮点击逻辑（原生JS示例）：

  document.querySelector('#break-btn').addEventListener('click', function() {
    window.location.href = '/login?target=break';
  });
  

• Check按钮点击逻辑（原生JS示例）：

  document.querySelector('#check-btn').addEventListener('click', function() {
    window.location.href = '/login?target=check';
  });
  

步骤2：登录页面获取并存储目标标识 #

在登录页面加载时，读取URL中的target参数并暂存，避免页面刷新丢失：

// 登录页面初始化时执行
let targetPage = 'check'; // 设置默认跳转页面
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('target')) {
  targetPage = urlParams.get('target');
  sessionStorage.setItem('loginTarget', targetPage);
}

步骤3：登录成功后根据标识跳转 #

登录验证通过后，读取存储的标识，用if-else判断跳转对应页面：

// 登录成功后的回调逻辑
function onLoginSuccess() {
  const target = sessionStorage.getItem('loginTarget') || 'check';
  if (target === 'break') {
    window.location.href = '/break-page'; // 替换为你的Break页面实际地址
  } else if (target === 'check') {
    window.location.href = '/check-page'; // 替换为你的Check页面实际地址
  }
  // 清除存储，避免后续登录受影响
  sessionStorage.removeItem('loginTarget');
}

补充适配说明 #

• 若使用Vue/React等框架，可改用路由参数传递标识，再通过状态管理工具（Vuex/Pinia/Redux）暂存，登录成功后跳转对应路由即可，逻辑思路一致。
• 若不允许URL传参，可直接在按钮点击时将标识存入localStorage，再跳转登录页，登录后读取判断。

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