web前端全系列 教程
1839个小节阅读:2242.9k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
想要在你的路径组件上使用转场,并对导航进行动画处理,你需要使用 v-slot
API 和 Transition
API
xxxxxxxxxx
<template>
<RouterLink to="/">Home</RouterLink> |
<RouterLink to="/about">About</RouterLink> |
<RouterLink to="/userinfo">用户中心</RouterLink>
<router-view v-slot="{ Component }">
<Transition name="fade" >
<component :is="Component"></component>
</Transition>
</router-view>
</template>
<script setup>
import { RouterLink, RouterView} from 'vue-router'
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
xxxxxxxxxx
<router-view v-slot="{ Component,route }">
<Transition :name="route.meta.transition ? 'fade' : ''" >
<component :is="Component"></component>
</Transition>
</router-view>
xxxxxxxxxx
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
meta:{
transition:true
}
}