问题引出

写页面中遇到需要写NavMenu 导航菜单,作为菜鸟按照Element官方的NavMenu 导航菜单用法,传统式使用在data声明一个activeIndex作为跳转的首页,当我点击NavMenu 导航菜单到一个子路由页面(此时导航上跳转子路由的文字高亮)再点击刷新时,导航页面上的字高亮显示的是我默认的页面

展示

这是默认的页面,默认"打单管理"文字高亮

这是点击了设置之后,路由跳转,此时"设置"文字高亮

点击刷新后,路由没跳转,但是导航上的文字变成了默认的高亮

源代码

<el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"text-color="#393939"active-text-color="#1D4DFB"@select="handleSelect"style="border: 0"router><el-menu-itemindex="1"style="border: 0; line-height: 80px; font-size: 20px"@click="showOrder">打单管理</el-menu-item><el-menu-itemindex="2"style="border: 0; line-height: 80px; font-size: 20px; margin-left: 30px"@click="showSet">设置</el-menu-item></el-menu>

解决办法 :使用NavMenu 导航菜单的router属性

<el-menu:default-active="$route.path"//将初始的activeIndex更改为$route.path //注意:route不是router!! 下同class="el-menu-demo"mode="horizontal"text-color="#393939"active-text-color="#1D4DFB"@select="handleSelect"style="border: 0"router//激活router><el-menu-itemindex="/orderManagement"style="border: 0; line-height: 80px; font-size: 20px"route="/orderManagement" //route="跳转的路由" 路径前面需要加"/">打单管理</el-menu-item><el-menu-itemindex="/orderSet"style="border: 0; line-height: 80px; font-size: 20px; margin-left: 30px"route="/orderSet"//route="跳转的路由" 路径前面需要加"/">设置</el-menu-item></el-menu>

参考于vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换