关键在于用路由守卫结合状态管理准确识别导航方向：前进设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 中用 <router-view v-slot></router-view> 包裹组件，并根据 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 类型的一级页面（如首页、我的）可做白名单处理，跳过动画，保持体验一致
