保存用户链接并跳转至Transfer Page，3秒后返回原链接实现方案

核心逻辑 #

点击按钮时先记录当前页面的访问地址，跳转至中转页后，通过定时器延迟3秒，再根据记录的地址跳转回原页面。

整体流程示意图 #

整体跳转流程示意图

一、HTML原生实现 #

适用于静态页面场景，使用localStorage存储原页面地址。

1. 原页面代码 #

<button onclick="navigateWithTransfer()">跳转至目标页</button>

<script>
function navigateWithTransfer() {
  // 存储当前页面URL
  localStorage.setItem('originUrl', window.location.href);
  // 跳转到中转页
  window.location.href = 'transfer.html';
}
</script>

2. 中转页（transfer.html）代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transfer Page</title>
</head>
<body>
    <h3>正在跳转，请稍候...</h3>
    <script>
        window.addEventListener('load', () => {
            setTimeout(() => {
                const originUrl = localStorage.getItem('originUrl');
                if (originUrl) {
                    window.location.href = originUrl;
                    // 清理存储的地址，避免后续干扰
                    localStorage.removeItem('originUrl');
                } else {
                    // 无记录时默认跳转首页
                    window.location.href = '/';
                }
            }, 3000); // 3秒延迟
        });
    </script>
</body>
</html>

HTML实现效果 #

HTML实现示例图

二、Vue项目实现 #

基于Vue Router实现，使用sessionStorage存储原路由路径（也可通过Pinia/Vuex全局状态管理）。

1. 原页面组件（如Home.vue） #

<template>
  <button @click="handleTransferJump">触发跳转</button>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const handleTransferJump = () => {
  // 存储当前路由的完整路径
  sessionStorage.setItem('originPath', router.currentRoute.value.fullPath);
  // 跳转到中转页路由
  router.push('/transfer');
};
</script>

2. 中转页组件（Transfer.vue） #

<template>
  <div class="transfer-container">
    <p>正在处理，请等待3秒...</p>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';

const router = useRouter();

onMounted(() => {
  const timer = setTimeout(() => {
    const originPath = sessionStorage.getItem('originPath');
    if (originPath) {
      router.push(originPath);
      sessionStorage.removeItem('originPath');
    } else {
      router.push('/');
    }
    clearTimeout(timer);
  }, 3000);
});
</script>

Vue实现效果 #

Vue实现示例图

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