业务:
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>
主要原因:
:default-active="$route.path"
这里default-active定义的是当前激活菜单的 index,我将default-active绑定为$route.path,例如当前页面是新闻维护,那么就是default-active的值就是/Basic/News,这样即使刷新页面也不会失去高亮显示状态。
实现效果:
注意:
- 在el-menu中一定要写router,不然不能路由跳转。
- default-active前一定要加冒号:
参考:Vue+Element-UI下刷新后高亮消失的解决办法_小丁冲鸭!的博客-CSDN博客_vue3+ts一刷新高亮就不显示了怎么处理