关键在于用路由守卫结合状态管理准确识别导航方向：前进设forward，后退设back；根组件依direction切换slide-left/slide-right过渡类；页面需绝对定位、key绑定 fullPath，并兼容popstate手势。

核心是让前进和后退两种导航行为触发不同方向的 CSS 动画，关键不在动画本身，而在于「准确识别导航方向」。Vue Router 不自带方向判断，必须结合路由守卫与状态管理来主动标记。

用路由守卫 + 状态管理标记方向

在 router.beforeEach 中，根据目标路由是否在历史栈中已存在，决定本次跳转是前进还是返回：

• 若 to.path 不在当前路由历史栈中 → 视为前进，设方向为 forward
• 若 to.path 恰好等于历史栈倒数第二项（即上一页）→ 视为后退，设方向为 back
• 使用 Pinia 或 Vuex 统一维护一个 direction 字段，供根组件读取

根组件动态绑定 transition name

在 App.vue 中用 包裹组件，并根据 direction 切换过渡类名：

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

• direction === 'forward' → 使用 slide-left（新页从右入，旧页左移）
• direction === 'back' → 使用 slide-right（当前页右滑出，上一页从左露出）
• 务必给每个页面组件加 :key="$route.fullPath"，避免复用导致动画失效

CSS 动画需满足层叠与定位要求

动画生效的前提是两页能同时存在并错位显示，因此页面容器需用绝对定位：

• 外层 .wrapper 设 position: fixed; inset: 0; overflow: hidden
• 每页 .page-layer 设 position: absolute; inset: 0，并启用滚动优化：-webkit-overflow-scrolling: touch
• slide-left-enter-from： transform: translateX(100%)
• slide-left-enter-to： transform: translateX(0)
• slide-right-leave-to： transform: translateX(100%)

兼容原生返回手势（如微信、iOS 浏览器）

用户点击左上角返回按钮或系统侧滑返回时，会触发 popstate 事件，但该事件晚于路由更新。解决方案：

• 在 beforeEach 中提前监听 window.onpopstate，一旦捕获就立即设 direction = 'back'
• 避免用 setTimeout 延迟判断，防止动画方向错乱
• 对 tab 类型的一级页面（如首页、我的）可做白名单处理，跳过动画，保持体验一致