ElementUi中NavMenu 导航菜单router用法

最新推荐文章于 2025-05-08 11:21:50 发布

不会有人真的学前端吧

最新推荐文章于 2025-05-08 11:21:50 发布

阅读量7.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue学习文章标签： vue elementui

本文链接：https://blog.csdn.net/fun_kunkun/article/details/119183390

Vue学习专栏收录该内容

7 篇文章

订阅专栏

在使用ElementUi的NavMenu组件时，作者发现一个问题：当点击导航跳转到子路由并刷新页面后，导航菜单的选中状态回到了默认页面。通过分析，作者提出了解决方案——利用NavMenu的router属性，结合vue-router来正确维护选中状态。详细步骤包括展示问题现象、提供源代码和解释解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题引出

写页面中遇到需要写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-item
        index="1"
        style="border: 0; line-height: 80px; font-size: 20px"
        @click="showOrder"
        >打单管理</el-menu-item
      >
      <el-menu-item
        index="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-item
        index="/orderManagement"
        style="border: 0; line-height: 80px; font-size: 20px"
        route="/orderManagement" //route="跳转的路由" 路径前面需要加"/"
        >打单管理</el-menu-item
      >
      <el-menu-item
        index="/orderSet"
        style="border: 0; line-height: 80px; font-size: 20px; margin-left: 30px"
        route="/orderSet"//route="跳转的路由"  路径前面需要加"/"
        >设置</el-menu-item
      >
    </el-menu>