如何利用组合式 API 封装一个“返回上一页”的通用 Hook？处理逻辑判断-Vue.js-PHP中文网

组合式 API 封装的“返回上一页”Hook需安全调用router.back()，包含历史栈判断（优先history.length>1，fallback至首页）、路由守卫拦截检测（通过afterEach比对to.fullPath）、自定义fallback策略（路径/函数/默认跳home），并导出响应式canGoBack与goBack函数。

如何利用组合式 api 封装一个“返回上一页”的通用 hook？处理逻辑判断

<p>用 <strong>组合式 API</strong> 封装一个“返回上一页”的通用 Hook，核心是封装 <code>router.back()</code> 的安全调用逻辑，并补充浏览器历史栈判断、路由守卫兼容、异常降级等细节。</p>

<h3>判断历史栈是否可回退</h3>
<p>直接调用 <code>router.back()</code> 可能触发空白页或白屏（比如 history 栈只有 1 条记录）。需先检查 <code>window.history.length > 1</code>：</p>

注意：该值在部分安卓 WebView 或某些嵌入式容器中可能不准，不能完全依赖
更稳妥的方式是结合 router.currentRoute 的 redirectedFrom 或自维护一个简易导航栈（如 localStorage 记录最近 3 个路径）
推荐做法：优先用 history.length 快速判断，失败时 fallback 到 router.push('/') 或指定首页

处理路由守卫拦截场景

用户点击“返回”时，若目标路由有 beforeRouteLeave 守卫且返回 false，router.back() 会静默失败。Hook 需感知这种“假成功”：

监听 router.afterEach，比对 to.fullPath 是否变化；若未变，说明返回被守卫阻止
可暴露一个 onBlocked 回调，供业务决定是否弹窗提示、跳转兜底页或取消操作
避免在 Hook 内自动重试，防止无限循环

支持自定义 fallback 行为

不是所有场景都适合无脑 back()。Hook 应允许传入 fallback 策略：

字符串路径（如 fallback: '/home'）→ router.push(fallback)
函数（如 fallback: () => useUserStore().isLogin ? router.push('/profile') : router.push('/login')）
不传 fallback 时，默认行为是 router.push({ name: 'home' }) 或 location.href = '/'（强制刷新兜底）

使用示例与导出结构

最终 Hook 可设计为：

const { goBack, canGoBack } = useGoBack({ fallback: '/dashboard' })

其中：

canGoBack 是响应式 ref，基于 watch(router.currentRoute, ...) + history.length 实时更新
goBack 是函数，内部按「尝试 back → 检查是否生效 → 失败则执行 fallback」流程执行
支持在 setup 中直接解构，也支持在 onBeforeRouteLeave 中调用以主动控制离开逻辑