本文探讨了Vue2和Vue3在处理动态路由和用户权限方面的一个关键区别。在Vue3中，beforeEach钩子的异步请求完成后再进行组件挂载，使得在setup中能获取到动态生成的menuList。而在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
5652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
