最近在写一个后台管理系统,用的vue+element,搞到侧边栏导航的时候路由跳转没有问题,但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了,因为项目时间比较紧,并且没有影响到我后面的开发所以就搁置了一段时间,今天有时间搞了一下,发现想的时候可能有些复杂,其实这个问题还是比较简单的。
例如:下面这段代码
<template>
<el-aside width="240px">
<el-menu
class="el-menu-vertical-demo"
:default-active="$route.path"
router
>
<el-menu-item index="/Order/OrderManagement">
<i class="iconfont icon-order"></i>
<span slot="title">订单管理</span>
</el-menu-item>
<el-menu-item index="/Supplier/SupplierManagement">
<i class="iconfont icon-gongyingshang"></i>
<span slot="title">设点管理</span>
</el-menu-item>
<el-menu-item index="/Commodity/CommodityManagement">
<i class="iconfont icon-shangpin"></i>
<span slot="title">商品管理</span>
</el-menu-item>
</el-menu>
</el-aside>
</template>
这里我使用了:
router模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转,所以我将el-menu-item的index设置成了path路由
default-active则是当前激活菜单的index。
之后这里利用了以上两点,将default-active绑定为$route.path,例如当前页面是订单管理,那么就是/Order/OrderManagement。这样即使刷新也不会失去高亮显示状态。