过渡动效

想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用v-slot API：

Transition的所有功能在这里同样适用。

单个路由的过渡

上面的用法，会对所有的路由，使用相同的过渡。如果你想让每个路由的组件有不同的过渡，你可以将meta元信息和动态的name结合在一起，放在上：

const routes = [
  {
    path: '/custom-transition',
    component: PanelLeft, meta: { transition: 'slide-left' },
  },
  {
    path: '/other-transition',
    component: PanelRight, meta: { transition: 'slide-right' },
  },
]

基于路由的动态过渡

也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。使用和刚才非常相似的片段：

我们可以添加一个后置道行狗子，根据路径的深度动态添加信息到meta字段。

router.afterEach((to, from) => {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  to.meta.transitionName = toDepth 

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com