关于VUE + Element 侧边栏页面刷新后不高亮显示的问题

最新推荐文章于 2024-08-08 08:48:09 发布

昨夜太平长安888

最新推荐文章于 2024-08-08 08:48:09 发布

阅读量1.1k

点赞数 1

分类专栏： Element-UI Vue 前端文章标签： VUE elementui

本文链接：https://blog.youkuaiyun.com/HelloWord176/article/details/113102847

版权

Vue 同时被 3 个专栏收录

59 篇文章

订阅专栏

前端

24 篇文章

订阅专栏

Element-UI

14 篇文章

订阅专栏

本文介绍如何在Element UI的后台管理系统中实现侧边栏导航的选中状态(高亮显示)在页面刷新后仍能保持不变的方法。通过设置`default-active`属性为当前路由路径`$route.path`来解决此问题。

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

写后台管理系统我们会经常用到element,侧边栏导航的时候路由跳转没有问题但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了，针对这个问题特别提出以下见解：

直接贴代码：

<el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      text-color="#333"
    >
      <el-menu-item  index="/situation" @click="go('/situation')"
        ><img src="../assets/img/qyts.png" alt="" /><span class="oneName"
          >全员态势</span
        ></el-menu-item
      >
      <el-submenu index="2" @click="go()">
        <template slot="title">
          <!-- <i class="el-icon-user"></i> -->
          <img src="../assets/img/jcsj.png" alt="" />
          <span class="oneName">基础数据</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/healthTable" @click="go('/healthTable')" class="twoName"
            >心率监测</el-menu-item
          >
          <el-menu-item index="/healthsleep" class="twoName" @click="go('/healthsleep')">活动状态</el-menu-item>
          <el-menu-item index="/healthmovement" class="twoName" @click="go('/healthmovement')">运动监测</el-menu-item>
          <el-menu-item index="/healthoxygen" class="twoName" @click="go('/healthoxygen')">血氧监测</el-menu-item>
          <el-menu-item index="/temperature" class="twoName" @click="go('/temperature')">体温监测</el-menu-item>
          <el-menu-item index="/police" class="twoName" @click="go('/police')">电子围栏</el-menu-item>
          <el-menu-item index="/Staydetection" class="twoName"  @click="go('/Staydetection')">停留监测</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/person" @click="go('/person')">
        <img src="../assets/img/grxx.png" alt="" />
        <span class="oneName">个人信息</span>
      </el-menu-item>
</el-menu>

这里使用了：
router模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，所以我将el-menu-item的index设置成了path路由
default-active则是当前激活菜单的index。

之后这里利用了以上两点，将default-active绑定为$route.path，例如当前页面是全员态势，那么就是/situation。这样即使刷新也不会失去高亮显示状态。