如何区分浏览器加载与导航？解决Nuxt页面重定向异常问题

要区分页面是刷新/直接访问，还是通过浏览器历史回退/前进进入，从而控制setup页面是否重定向到第一步，你可以通过浏览器Navigation API结合历史状态判断来解决这个问题，具体如下：

核心思路 #

• 利用navigation.type直接判断页面加载类型：
  • reload：页面是刷新加载
  • navigate：直接访问URL或通过常规链接导航
  • back_forward：通过回退/前进按钮导航
• 只有当页面是回退/前进来自preview页面时，才阻止重定向；刷新或直接访问时，强制重定向到第一步。

实现代码（现代浏览器兼容） #

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

const router = useRouter();
// 获取preview页面的路径
const previewPath = router.getRoutes().find(route => route.name === "preview").path;

function goToInitialStep() {
  // 判断是否为刷新或直接访问
  const isReloadOrDirect = navigation.type === 'reload' || navigation.type === 'navigate';

  // 刷新/直接访问时，强制跳转到第一步
  if (isReloadOrDirect) {
    router.push({ path: '/setup', query: { step: 1 } });
    return;
  }

  // 回退/前进且来自preview页面时，阻止重定向
  if (history.state?.forward === previewPath) {
    return;
  }

  // 其他场景（比如从非preview页面导航过来），跳转到第一步
  router.push({ path: '/setup', query: { step: 1 } });
}

onBeforeMount(() => {
  goToInitialStep();
});
</script>

兼容旧浏览器方案 #

如果需要兼容不支持Navigation API的旧浏览器，可以结合performance.navigation.type（已废弃但部分浏览器仍支持）和sessionStorage做补充：

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

const router = useRouter();
const previewPath = router.getRoutes().find(route => route.name === "preview").path;
const sessionKey = 'isFromHistoryBack';

function goToInitialStep() {
  // 兼容旧浏览器的导航类型判断
  const navType = performance?.navigation?.type || navigation.type;
  const isReload = navType === 1 || navType === 'reload';
  const isDirect = navType === 0 || navType === 'navigate';
  const isBackForward = navType === 2 || navType === 'back_forward';

  // 刷新/直接访问时，清除标记并跳转到第一步
  if (isReload || isDirect) {
    sessionStorage.removeItem(sessionKey);
    router.push({ path: '/setup', query: { step: 1 } });
    return;
  }

  // 检查是否来自preview页面的回退
  const isFromPreview = history.state?.forward === previewPath || sessionStorage.getItem(sessionKey) === 'true';
  
  if (isFromPreview) {
    sessionStorage.setItem(sessionKey, 'true');
    return;
  }

  // 其他场景跳转到第一步
  router.push({ path: '/setup', query: { step: 1 } });
}

// 页面卸载时清除标记，避免其他场景误判
onUnmounted(() => {
  sessionStorage.removeItem(sessionKey);
});

onBeforeMount(() => {
  goToInitialStep();
});
</script>

效果说明 #

• 当用户从/preview回退到/setup?step=3时，会阻止重定向，保留在第三步；
• 回退后点击刷新按钮，会触发reload类型判断，强制跳转到第一步；
• 直接访问/setup?step=2或/setup?step=3时，也会自动跳转到第一步。

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