|
背景在我的 《Vue 3 开发企业级音乐 App》课程问答区，有个同学提了个问题，在歌手列表到歌手详情页面到转场动画中，只有进入动画，却没有离场动画： 
该学生确实在这个问题上研究了有一段时间，而且从他的描述，我一时半会儿也想不出哪有问题，于是让他把代码传到 GitHub 上，毕竟直接从代码层面定位问题是最靠谱的。
问题定位一般遇到此类问题的时候，我的第一反应是他用的 Vue 3 版本可能有问题，毕竟 Vue 3 还在不断迭代过程，某个版本有一些小 bug 是很正常的，于是我把他的项目的 Vue 3 版本升级到了最新的 3.2.26。 但运行后发现，该问题仍然存在。我感到有些困惑，于是跑了一下自己课程项目源码，并没有复现该问题，然后我又把自己课程项目的 Vue 3 版本也升级到最新，仍然没有复现该问题。 通过上述分析，我基本排除了 Vue 3 版本的问题。本质上说，从歌手页面切换到歌手详情页无非就是打开歌手详情页这个二级路由页面，而从歌手详情页退回到歌手页面无非就是移除歌手详情页这个二级路由页面。于是我开始对比两边项目的歌手页面以及详情页的源码： <!-- singer.vue --><template><div class="singer" v-loading="!singers.length"> <index-list :data="singers" @select="selectSinger" ></index-list> <!-- 用router-view去承载二级路由 --><!-- <router-view :singer="selectedSinger"></router-view>--> <!-- vue3需要在router-view中使用transition, appear进入时候也会有动画 --> <router-view v-slot="{ Component }"><!-- singer-detail返回动画无效 研究 --> <transition appear name="slide"> <!-- component动态组件Component就是作用域插槽中的一个属性，这个是由router-view这个组提供的 Component就是你的路由表中的路由组件 exclude="singer-detail"排除不缓存数据的组件否则会缓存数据导致每次数据都不重新请求 --> <component :is="Component" :singer="selectedSinger" ></component> </transition> </router-view></div></template><!-- singer-detail.vue --><template> <!-- 因为通过二级路由实现,所以放在views下 --> <section class="singer-detail"> <music-list :songs="songs" :title="title" :pic="pic" :loading="loading" ></music-list> </section></template>上边是学生的代码，接下来贴一下我项目的源码： <!-- singer.vue --><template> <div class="singer" v-loading="!singers.length"> <index-list :data="singers" @select="selectSinger" ></index-list> <router-view v-slot="{ Component }"> <transition appear name="slide"> <component :is="Component" :data="selectedSinger"/> </transition> </router-view> </div></template><!-- singer-detail.vue --><template> <div class="singer-detail"> <music-list :songs="songs" :title="title" :pic="pic" :loading="loading" ></music-list> </div></template>经过对比，我感觉两边的源码差别并不大，除了该学生会用注释做一些学习笔记。一时间难以找出问题，于是我祭出了杀手锏
下载地址:
Vue2利用Axios发起请求的详细过程记录
JavaScript超详细实现网页轮播图 |
