Vue-Router 第十二节：路由过渡动效

1、所有路由使用相同过渡

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

此用法会对所有的路由使用相同的过渡。

 <router-view #default="{route , Component }">                   
      <transition name="fade">                              <!--  name 为 fade的过渡效果名  -->
        <component :is="Component" />                       
      </transition>
    </router-view>

2、单个路由过渡

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

// App.vue  *********重点在这**********
<template>
  <div>
    <router-view #default="{route , Component }">                   
      <transition  :name="route.meta.transition">             <!--  name 为 路由动态配置的过渡效果名  -->
        <component :is="Component" />                       
      </transition>
    </router-view>
  </div>
</template>
​
<script setup lang="ts">
​
</script>
​
<style scoped>
div {
  width: 100%;
  height: 100%
}
.fade-enter-active, .fade-leave-active {           /*  fade-enter-active：进入动画的生效状态       fade-leave-active：离开动画的生效状态。*/
  transition: opacity .5s;  
}  
.fade-enter-to, .fade-leave-to {                       /*   fade-enter-to：进入动画的结束状态   fade-leave-to离开动画的结束状态 */
  opacity: 0;  
} 
</style>
​

// router/index.ts
import About from '@/views/about/index.vue'
import path from 'path';
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 1、定义路由 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [
    // 可直接导入或者引入
    {
        path: '/',
        component: () => import("@/views/login/index.vue")
    },
    {
        path: '/home',
        component: () => import("@/views/home/index.vue"),
           meta:{
       //************* 如果你想让每个路由的组件有不同的过渡，你可以将元信息和动态的 name 结合在一起，放在<transition> 上 ，配置为fade
            transition: 'fade'                       
        }
    }
]
​
​
// 2、创建路由实例并传递routes
const router = createRouter({
    history: createWebHistory(),
    routes
})
​
const whileList = ['/']
router.beforeEach((to, form, next) => {
    if ((whileList.includes(to.path) || localStorage.getItem('token')) ) {
        next()
    } else {
        next('/')
    }
})
// 导出
export default router
​