vue组件reload之后不会执行动画

Posted 2023-04-22

参考技术A 1、点击列表中分页的时候，不管加载第几页的数据，翻转动画效果都不执行

2、点击卡片操作的时候，当前卡片的翻转效果消失了，其他改变的样式都是好的

3、单独点击卡片效果的显示了，然后再单击分页时，那个被单独操作的卡片，分页时的动画又没有了

Vue路由

导航守卫：

帮助我们解决一些在组件加载之前可以做一些操作，尤其是异步操作，这样可以避免组建加载完毕之后，却没有数据的尴尬。当然，你不应该在组件加载之前做太多的异步操作，这样会导致页面的白屏时间过长，用户体验也很差，所以，须慎用导航守卫。（异步操作是独立于生命周期之外的操作，因此vue并不会乖乖的先执行完beforeCreate周期中的异步操作，验证了信息后再执行下一周期，而是先执行完整个生命周期再执行异步操作，这样的做法会导致，vue实例在渲染dom的时候由于大量数据得不到，渲染出一个很丑的页面）

 

完整的导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
---------------------
作者：闲人王昱珩
来源：CSDN
原文：https://blog.csdn.net/dkr380205984/article/details/82385469
版权声明：本文为博主原创文章，转载请附上博文链接！