[JavaScript知识库]Vue全家桶 电商后台管理项目实战08

实现选中的高亮

主要是通过菜单menu的default-active属性设置

将点击的路径保存到sessionStorage中

绑定点击事件

     <!-- 二级菜单 -->
        <!-- :index="'/'+subItem.path"实现跳转 -->
          <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id"> 
         <template slot="title" @click="saveNavStage('/'+subItem.path)" >

点击事件

// 实现高亮
saveNavStage(activePath){
// 将路径存储在sessionStorage中
window.sessionStorage.setItem('activePath',activePath)
// 设置高亮
this.activePath=activePath
}

绑定default-active属性控制高亮

  <!-- 一级菜单 -->
      <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
        <template slot="title" :default-active='activePath'>

?data中绑定

  // 实现高亮
    activePath:''