0
点赞
收藏
分享

微信扫一扫

小满Router(第十章-路由过渡动效)

倚然君 2022-03-27 阅读 38

过渡动效

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

    <router-view #default="{route,Component}">
        <transition  :enter-active-class="`animate__animated ${route.meta.transition}`">
            <component :is="Component"></component>
        </transition>
    </router-view>

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

declare module 'vue-router'{
     interface RouteMeta {
        title:string,
        transition:string,
     }
}

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta:{
         title:"登录页面",
         transition:"animate__fadeInUp",
      }
    },
    {
      path: '/index',
      component: () => import('@/views/Index.vue'),
      meta:{
         title:"首页!!!",
         transition:"animate__bounceIn",
      }
    }
  ]
})
举报

相关推荐

0 条评论