推荐使用内置v-safe-nav指令防连点，需在按钮添加指令、确保路由守卫同步状态、依赖isTransitioning判断跳转；也可手动封装safePush函数或在平台输入框声明防连点需求。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在码上飞AI平台中快速点击导航按钮导致页面重复加载、跳转卡顿或预览异常，是高频操作下的典型问题。平台本身不自动拦截连续点击，需开发者在生成逻辑或自定义交互中主动控制跳转行为。
使用内置防抖跳转指令（推荐）
码上飞AI网页版已集成 v-safe-nav 自定义指令，适用于所有支持 Vue 3 的生成页面模板。
第一步：在需要跳转的按钮上添加指令，例如：<button v-safe-nav="{ path: '/order' }">去下单</button>
第二步：确保项目已启用路由守卫状态同步——该指令依赖 router.beforeEach 和 router.afterEach 更新全局 isTransitioning 响应式状态。若你修改过路由初始化代码，请核对是否保留了这两处钩子调用。
第三步：点击按钮时，指令会自动检查 【isTransitioning.value 为 true 时直接忽略本次点击】，避免 push 调用进入堆栈。这比前端加 setTimeout 更可靠，因它基于真实导航生命周期而非时间窗口。
手动封装安全跳转函数
当你需要精确控制跳转参数、错误反馈或兼容旧版生成逻辑时，可覆盖默认 router.push 行为。
方法一：在 router/index.ts 中重写 push（仅限导出源码后私有部署场景）
替换原始 push 调用，捕获 NavigationDuplicated 错误并静默处理：
const originalPush = router.push;<br>router.push = function(location, options?) {<br> return originalPush.call(this, location, options).catch(err => {<br> if (err.name !== 'NavigationDuplicated') throw err;<br> });<br>};
方法二：在业务组件中定义 safePush 工具函数（H5直链/小程序预览页通用）
这一步操作起来很简单，直接把下面代码粘贴进 setup() 或 methods 内即可：
let pendingJump = null;<br>const safePush = (to) => {<br> if (pendingJump) clearTimeout(pendingJump);<br> pendingJump = setTimeout(() => {<br> router.push(to).catch(e => e.name !== 'NavigationFailure' && console.error(e));<br> pendingJump = null;<br> }, 150);<br>};
注意：【150ms 是经验阈值，低于此值用户感知不到延迟，高于此值可能漏判连点】。若你的页面跳转常含 API 请求前置校验，建议上调至 250ms 并在请求开始时置 pendingJump = null。
在码上飞AI输入框中声明防连点需求
如果你尚未导出代码，仍在码上飞AI网页版对话界面中描述需求，可直接用自然语言声明防重复逻辑。
在首页输入框中写入类似以下任一句即可触发平台自动注入防抖机制：
“列表项点击跳转详情页，要防止用户手快连点两次”
“按钮点击后立即禁用，跳转完成再恢复”
“同一个商品详情页只允许栈中存在一个实例”
平台将据此在生成的 Vue 组件中自动插入 v-safe-nav 指令或封装好的 safePush 调用，无需手动补丁。
