动态修改elementui导航栏的名称

动态修改elementui导航栏的名称

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

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

效果演示

如图1,当选中二级菜单当中的最后“生活实践”的时候,一级菜单显示“生活实践”;
动态修改elementui导航栏的名称_第1张图片
如图2,当选中二级菜单当中的最后“专业技能”的时候,一级菜单显示“专业技能”;
动态修改elementui导航栏的名称_第2张图片
如图3,当选中的是二级菜单以外的内容的时候,一级菜单显示为默认的"素质系统"
动态修改elementui导航栏的名称_第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对象,将页面路径与文字对应起来

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