解决Element-UI 侧边栏页面刷新后不高亮显示的问题

2,343 阅读1分钟

最近在写一个后台管理系统,用的vue+element,侧边栏导航的时候路由跳转没有问题,但是页面刷新发现侧边栏的选中状态(高亮显示)没有了,其实问题很简单。

例如:

<template>
    <el-menu 
    	class="el-menu-vertical-demo" 
    	:default-active="$route.path" 
    	router
     >
      <el-menu-item index="/home">
        <i class="iconfont icon-order"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/Goods/GoodsManagement">        
        <i class="iconfont icon-shangpin"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>
    </el-menu>
</template>

*** 启用router模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转**,所以将el-menu-item的index设置成了path路由,default-active则是当前激活菜单的index,将**default-active绑定为$route.path,**这样即使刷新也不会失去高亮显示。