栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

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

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/825865.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号