Element-Plus导航栏刷新高亮消失（解决）

Daisy_ls

已于 2023-02-28 15:53:23 修改

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：工作中的问题 element Plus 文章标签： vue.js 前端 javascript

于 2023-02-28 15:50:44 首次发布

本文链接：https://blog.youkuaiyun.com/Daisy_ls/article/details/129263338

本文介绍了在Element-Plus项目中，左侧导航栏高亮在刷新页面后消失的问题及其解决方案。通过将default-active绑定为$route.path，确保刷新后依然能保持正确的高亮状态，同时强调在el-menu中必须包含router属性以实现路由跳转，并提醒default-active前需加冒号。

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

业务：

element项目左侧导航栏里面的高亮，点击时都正常展示，一旦刷新页面，高亮就消失了，但是页面还是之前点击的页面。

为了解决这个问题，试了网上说的所有方法，最后发现是少加了一个符号

具体实现：

<el-menu router :default-active="$route.path" class="el-menu-vertical" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="height:100%">
     <el-menu-item index="/Basic/News">
          <i class="el-icon-document"></i>
              <span slot="title">新闻维护</span>
     </el-menu-item>
     <el-menu-item index="/Basic/TrainingMaintenance">
          <i class="el-icon-document"></i>
              <span slot="title">培训维护</span>
     </el-menu-item>
</el-menu>