动态菜单栏+面包屑的优化处理

3,007 阅读1分钟

一开始只有根据后端返回的内容实现动态的顶部菜单栏和动态菜单的控制 之后要实现面包屑的展示和跳转,

image.png

1.路由里配置父级菜单,在这里我使用了属性cname作为中文属性名

1628077783(1).jpg 2.后端根据顶栏菜单动态返回侧边栏, 这里是通过**通过name获取页面,s所以accessUri存放的是路由name属性

image.png

ps:这个项目里我同时使用了mock模拟接口返回, 顶部栏菜单可以使用模拟接口,侧边栏的控制一开始我是直接获取router.js获取的,但是其实可以在本地的还新增一项关于侧边栏的js,第一级即顶栏菜单,下级都是侧边栏,通过 menLevel控制是否显示 image.png mock实现的顶部栏菜单接口 image.png

3.轻轻松松获取到面包屑的路径 考虑到会复用很多页面,所以我把面包屑的值存在vuex便于更改路径名称

image.png