1.首先看下目录结构

Element Plus菜单 Menu固定到顶部 elementui动态菜单_数据

2.思路

登录成功后调用接口获取菜单信息后进行数据处理然后添加到路由展示

1调用接口

Element Plus菜单 Menu固定到顶部 elementui动态菜单_es6_02


登录成功后调用获取菜单栏接口并转化数据

存入session里防止页面刷新菜单消失(main.js里面用到)2.数据转化代码

Element Plus菜单 Menu固定到顶部 elementui动态菜单_es6_03


这里有两个坑

1.用require引入组件 用important无法引入成功,因为important写法不支持变量会报错,

Element Plus菜单 Menu固定到顶部 elementui动态菜单_数据_04


在忽略文件里忽略该文件不会报错 或者降低版本

但是!!!

代码运行控制台仍然报错 找不到某某某文件夹

所以!!!

还是用require引入2:第二个坑

如果 没有children 不要在menu里面添加children属性

添加完之后 如果再添加alawaysShow属性 如果为true 那么该层级就会被当作父节点 将无法点击并且菜单级别的alawaysShow属性不要给true

tips:对于菜单级别若alawaysShow为true 则无法点击跳转页面

3.菜单栏显示

Element Plus菜单 Menu固定到顶部 elementui动态菜单_javascript_05


找到该文件夹 并将session里面的数据渲染到左侧菜单栏4.防止刷新404

Element Plus菜单 Menu固定到顶部 elementui动态菜单_vue.js_06


main.js添加上面代码

后端返回的数据格式就是树状结构
tips:存入session里面的数据 对components和属性值为true和false不灵敏, 除了layout 有时菜单级别的components是无法看见的,有时属性值为true和false的也不完全显示正确,想看具体转化后的数据打印即可。
针对本博客来说打印的数据是真是数据的三倍 因为seesion引用了一次,跳转引用一次,打印引用一次,对象存放的是地址,所以打印出来是三倍数据 但 不会影响效果。(对象在控制台打印的是最终的数据)

补充:当修改菜单名称后 面包屑的名称并不能实时更新 而需要刷新一下
原因 :通过addRouter添加进去的路由 没有更新至最新的数据
解决:
思路 将存储在session里面的数据 里的title展现上去
1.数据转化 树形转扁平

Element Plus菜单 Menu固定到顶部 elementui动态菜单_vue.js_07


2:将session里面的title作为展现

Element Plus菜单 Menu固定到顶部 elementui动态菜单_html5_08


方法不唯一 此方法要求路由的name唯一