使用vue写管理后台,实现动态侧边栏(后台返回数据)

首先参考了https://segmentfault.com/a/1190000015419713这篇文章,对我受益很大。

大致思路如下

1.后台同学返回一个json格式的路由表,我用easymock造了一段:动态路由表,大家可参考;
2.因为后端同学传回来的都是字符串格式的,但是前端这里需要的是一个组件对象啊,写个方法遍历一下,将字符串转换为组件对象;
3.利用vue-router的beforeEach、addRoutes、localStorage来配合上边两步实现效果;
4.左侧菜单栏根据拿到转换好的路由列表进行展示;
大体步骤:拦截路由->后台取到路由->保存路由到localStorage(用户登录进来只会从后台取一次,其余都从本地取,所以用户,只有退出在登录路由才会更新)

同样也附上我改造后的代码地址 github
使用vue写管理后台,实现动态侧边栏(后台返回数据)_第1张图片
使用vue写管理后台,实现动态侧边栏(后台返回数据)_第2张图片

当然这是我参考https://segmentfault.com/a/1190000015419713后的见解。同样还有很多方式实现这个功能,效果图。
使用vue写管理后台,实现动态侧边栏(后台返回数据)_第3张图片

你可能感兴趣的:(html,js,vue)