vue移动端动态路由平滑切换需四步：用meta显式声明动效类型；router-view绑定唯一key防复用；css动画仅用transform+will-change启用gpu加速；keep-alive外层包裹transition并设mode="out-in"。
Vue 动态路由在移动端实现平滑切换，核心不是“能不能动”，而是“怎么控”——控制方向、控制复用、控制渲染时机、控制硬件加速。下面四点直击实际开发中最常卡顿、闪跳、错位的环节。
用 meta 显式声明动效类型，别猜路径深浅
靠 to.path.split('/').length 判断前进/后退，在移动端极易出错：比如 /user/123 和 /user/456 路径长度一样，但其实是同一组件不同实例，该用左滑；而 /list → /search 层级相同却语义不同，可能需要淡入。更稳妥的方式是路由定义时就写清楚：
{ path: '/detail/:id', component: Detail, meta: { transition: 'slide-left' } }{ path: '/profile', component: Profile, meta: { transition: 'fade' } }- 未配置的兜底统一用
fade，避免过渡名为空导致动画失效
router-view 必须绑定唯一 key，防组件复用跳过动画
动态路由如 /order/1001 → /order/1002，Vue 默认复用同一个组件实例，<transition></transition> 的 enter/leave 钩子根本不会触发，页面就像“瞬移”。解决方法很简单：
