vue 1.x里如何在router-view上监听transition的结束

Question

我在router-view上加了transition，因此当路由切换时，组件在enter和leave时会有一个过渡动画存在，我现在某一个路由对应的组件里面我需要知道当前的transition是否结束了，所以问题来了，我如何让我的这个组件知道我的transition结束了。

假如说我这个需要知道transition结束的组件对应的路由是/foo。

当路由切换的时候，也就是从/bar进入/foo时，倒是比较好监听，利用transition的afterEnter钩子，我可以监听到router-view上的动画结束，于是我可以在包裹router-view的父组件上绑定这个afterEnter钩子，在这个钩子里$dispatch一个事件，去告诉/foo对应的组件“transition结束啦，该干嘛干嘛啦”。

可是现在有个问题是，当浏览器打开的就是这个组件的路由地址/foo时，也就是浏览器打开进入的就是这个路由时，没有路由切换过程，这个时候并不会有transition，自然不会有transition的钩子执行，所以我想着要不就先在包裹router-view的父组件上的ready事件里$dispatch一次，可是发现父组件$dispatch时，/foo对应的组件还没有加载好，因此他没能成功监听到父组件的$dispatch。

目前我增加了许多逻辑用来判断是否是直接进入的/foo，如果是直接进入的就不用等待父组件$dispatch，如果不是直接进入的，就是从其他组件路由过来的，那么就要等待transition结束。

目前这种写法感觉很hack，也很复杂，感觉增加许多不必要的代码，请问大家有比较好的解决办法吗？

Answer 1

试试路由钩子

或者——偷偷切换到 /bar 再切换回来