做项目时,领导要求首次加载的页面添加动画效果,缓存页面不能有动画效果
缓存使用keep-alive,在store里面设置cachedViews数组,每次路由跳转收集当前路由信息,如果cachedViews存在则return,不存在则添加。(element-admin自带的,不多赘述)
重点是transition,transition的name接收动画,在store里面添加isTransform字段,判断是否需要动画。
然后在 ADD_CACHED_VIEW方法中设置
state.isTransform = true;
在DEL_CACHED_VIEW,DEL_OTHERS_CACHED_VIEWS,DEL_ALL_CACHED_VIEWS方法中设置
state.isTransform =false;
最后回到appmain.vue中 设置
<transition :name="$store.state.tagsView.isTransform?'fade-transform':''" mode="out-in" >
<!-- <router-view :key="key" /> -->
<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>
</transition>
切记,keep-alive缓存时每个页面的name要和router的name一致否则无效