本文记录了一次在Vue.js前端项目中实现后台管理系统的角标功能的过程。需求是当售后待处理订单数量大于等于1时，显示角标。通过在SidebarItem.vue组件中调用接口获取数据，并在渲染路由时判断展示角标。在订单状态改变时，实时更新角标显示，确保信息准确。同时提出了改进方案，以应对多个菜单项需要角标的场景。
1.需求：
当售后待处理订单数量大于等于1的时候，在售后订单菜单栏上显示出待处理数量
2.定位：
经过内容定位，可知在views文件夹下的layout文件夹中的SidebarItem的vue文件中传入获取数据，并在item子组件中渲染出来，如图：
该项目有权限控制，并精确到按钮级，又因为登陆账号后边需要获取待处理订单数数据，所以跟后端协调后，让后端给了一个没有权限的，只跟随账号登陆进去便可获取的接口来获取数据。
3.思路：
账号登陆进入后，在获取路由列表数据之后，循环遍历渲染路由之前调用接口，将获取到的待处理订单数量放入对应路由地址的数据中去。 在渲染路由之时，根据数量判断是否展示数量图标。
4.操作：
在premission中：
在vuex中，匹配对应路由，并将传递的数量插入到对应数据中：
最低0.47元/天 解锁文章
扫一扫
467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
