修改element 导航栏 elementui美化导航栏

动态修改elementui导航栏的名称

• 效果演示
• 实现思路
• 总结

elementui+vue是一个经典的前端框架应用。使用elementui可以很快的生成一个导航栏，但是默认的elementui导航栏二级菜单是固定的，不能根据二级菜单动态调整，本文提出一种解决办法。

效果演示

如图1，当选中二级菜单当中的最后“生活实践”的时候，一级菜单显示“生活实践”；

如图2，当选中二级菜单当中的最后“专业技能”的时候，一级菜单显示“专业技能”；

如图3，当选中的是二级菜单以外的内容的时候，一级菜单显示为默认的"素质系统"

实现思路

1、首先说代码结构：在一个vue文件里面，至少要包含html代码和js代码，我最开始是这样写的：

html部分（就是简单的element组件部分）：

<el-menu mode="horizontal" router :default-active="$route.path">
   <el-menu-item :index="'/'+'index'" >首页</el-menu-item>
   <el-submenu index="2">
     <template slot="title">{{pathName[$route.path]}}</template>
     <el-menu-item :index="'/systema'">思想品德</el-menu-item>
     <el-menu-item :index="'/systemb'">身心发展</el-menu-item>
     <el-menu-item :index="'/systemc'">学业成绩</el-menu-item>
     <el-menu-item :index="'/systemd'">专业技能</el-menu-item>
     <el-menu-item :index="'/systeme'">科创能力</el-menu-item>
     <el-menu-item :index="'/systemf'">生活实践</el-menu-item>
   </el-submenu>
   <el-menu-item :index="'/material'">材料管理</el-menu-item>
   <el-menu-item :index="'/analyse'">分析报告</el-menu-item>
   <el-menu-item :index="'/evaluate'">评价</el-menu-item>
   <el-menu-item :index="'/personalized'">个性化方案</el-menu-item>
   <el-menu-item :index="'/ground'">广场</el-menu-item>
 </el-menu>

js部分（其实就是在js里面定义了一个对象）

pathName: {
   '/systema':'思想品德',
   '/systemb':'身心发展',
   '/systemc':'学业成绩',
   '/systemd':'专业技能',
   '/systeme':'科创能力',
   '/systemf':'生活实践',
 }

2、再说思路：其实是el-menu标签里面的 $route.path 给我的启发，如果我能够拿到当前页面的路径，再根据路径的名字显示相应的内容就行了。于是在需要动态调整名字的地方写上

{{pathName[$route.path]}}

再在js部分事先定义好相应路径的文字内容。
注意：如果当前是处于一级菜单的其他选项的时候，要把这个动态调整的部分处理成默认的文字，所以将以上代码做如下调整：

{{pathName[$route.path]?pathName[$route.path]:'素质系统'}}

也就是当能够在pathName对象里面找到相应的内容的时候，显示对应的文字，如果找不到，说明没有点击对应的一级菜单，所以显示默认的内容

总结

总结就是有两步：
1、结合$route.path获取当前页面路径并根据路径显示相应的文字；
2、创建js对象，将页面路径与文字对应起来