解决elementplus menu菜单刷新后样式丢失问题

• 在我们做一个经典的CMS时会用到elementplus的menu菜单组件去做一个路由跳转 像这样

代码如下

const menuList = [
  {
    name: 'A页面',
    path: '/home/a',
    index: '1'
  },
  {
    name: 'B页面',
    path: '/home/b',
    index: '2'
  },
  {
    name: 'C页面',
    path: '/home/c',
    index: '3'
  },
  {
    name: 'D页面',
    path: '/home/d',
    index: '4'
  }
]

<div class="menu-list">
  <el-menu class="el-menu" router="true">
    <el-menu-item v-for="item in menuList" :index="item.path">
      <el-icon><Memo /></el-icon>
      <span>{{ item.name }}</span>
    </el-menu-item>
  </el-menu>
</div>

• 但是这时候发现一个问题 当我们在其他页面时刷新页面 menu菜单的样式会丢失

• 可以看到我们目前是在C页面下的 路由也跳转过来了 但是menu的C并没有高亮样式
• 这时可能有人问了 没有加default-active 加了的话在B路由刷新之后A会高亮 但是B没有高亮 不信的可以去试一下

解决方法

我们可以通过computed和useRouter拿到当前路由 然后动态绑定到menu上 由路由来判断哪个menu菜单应该高亮

// 判断当前路径与当前点击的菜单是否相同决定样式
let currentPath = computed(() => {
  return useRouter().currentRoute.value.path
})

然后把currentPath通过v-bind绑定到class上去判断

<div class="menu-list">
  <el-menu class="el-menu" router="true">
    <el-menu-item
      v-for="item in menuList"
      :class="{ active: currentPath === item.path }"
      :index="item.path"
    >
      <el-icon><Memo /></el-icon>
      <span>{{ item.name }}</span>
    </el-menu-item>
  </el-menu>
</div>

这样就完美解决刷新后样式丢失的问题啦