如何根据路由高亮 Element UI 里的 el-menu-item ?

el-menu 里的 default-active 在刷新页面的时候重置高亮的菜单,导致的结果就是当前页面和高亮的菜单不匹配。可以尝试用下面的代码来解决:

➥ Vue

<el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
  <el-menu-item index="/home">
    <i class="el-icon-menu">i>
    <span slot="title">导航一span>
  el-menu-item>
  <el-menu-item index="/home/bar" :route="{ path: '/home/bar' }">
    <i class="el-icon-location">i>
    <span>导航二span>
  el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document">i>
    <span slot="title">导航三span>
  el-menu-item>
el-menu>

重点就是把 default-active$route.path 关联,变成一个动态的值。

你可能感兴趣的:(日常开发的小问题)