vue3的beforeEach和vue2的beforeEach里面的异步请求的区别

问题描述：在一个项目中，我想根据用户的权限不同，所看到的菜单是不同的。这样就产生了一个需求：根据用户权限，请求接口生成动态菜单。
由于菜单的不一样，所以我希望每个用户的路由也是不一样的。所以路由也需要动态生成。
那么我就想到了用 router.beforeEach来请求接口获取用户菜单，从而可以生成动态路由。并把此时获取到的用户菜单存入store中，方便生成动态菜单。

过程大概如下：

vue3中的现象

这时，我发现在vue3中，我可以直接在setup里面就从store里获取到这个menuList。（setup就相当于vue2中的beforeCreate和created生命周期。）

打印了一下他们执行的顺序，发现：vue3是在beforeEach的异步请求执行完毕后，才开始去挂载组件。

vue2中的现象

而在vue2中，我在beforeCreate、created、beforeMount、mounted生命周期钩子中都从store中拿不到menuList数据。

打印了一下他们执行的顺序，发现：vue2是先挂载组件，再执行完毕beforeEach的异步请求。

所以，我在vue2中拿不到数据，在vue3中却能拿到数据。因为在beforeEach中的异步请求函数的执行完毕时间不一样。
总结：vue3是在beforeEach的异步请求执行完毕后，才开始去挂载组件。
vue2是先挂载组件，再执行完毕beforeEach的异步请求。

---

2022-04-22