vue添加路由动画导致组件方法失败。

Question

1：问题描述
想给router-view添加 切换时的动画效果 于是给<router-view>标签上添加 <transition>属性！但是发现加完这个属性后 切换路由后发现 要切换到的组件里的方法里触发初始化的函数失效了 进查找发现时 函数运行时dom元素没有加载到页面之中！但是如果不加路由动画则正常获取没有问题!

2:没有路由动画时候的截图如下

再要切换的组建之中 方法挂在mounted上截图如下

是可以获取相应dom并可以完成初始化的！

当加入路由后

在要切换组件中就无法获取到页面中的dom了

3：在网上搜了很多可能是因为搜索关键词的问题 答案一般都是说需要给函数中添加$nextTick 但是添加后没有效果，我的理解是nextTick是监听数据变化后修改 但是我这个目前还是静态页面不涉及到数据的变动并且没有路由动画之前都没有问题！后来我在切换组件的函数中添加了 一个定时器 在定时器后是可以获取出相关的dom数量了 但是第一写定时器感觉不是正确解决办法第二就是在定时器执行之前页面样式还是出现错误！

请大家帮忙看看怎么解决一下 谢谢！

Answer 1

两种办法
1.看下你定义的动画多少s。然后setTimeout用在多少s后在调用
2.在methods里面定义一个函数去获取你要的dom，然后在过渡动画加上JavaScript钩子，在进入完成后在调用函数即可