＜el-menu＞菜单组件中 router 和 default-active 属性的使用技巧（解决一级路由导航项和二级路由导航项不能同时高亮的问题）

前言

Element Plus提供的 <el-menu> 菜单组件常用作顶部导航条或侧边导航条，当点击每一个 <el-menu-item> 项时，对应导航项就会高亮激活，这很方便，但是，在页面刚加载时，没有导航项被点击，也就没有导航项高亮，这不能满足我们的要求，我们需要有一个导航项默认为高亮激活状态，最好是能和当前路由相关联。

一、router属性

当 <el-menu> 添加 router 后，启用 vue-router 模式， 该模式会在激活导航项 <el-menu-item> 时以 index 属性作为 path 进行路由跳转。

二、default-active属性

配合 default-active 属性，设置加载时的默认激活项就可以实现在页面刚加载时有一个导航项高亮激活。当 default-active 的属性值设置为 <el-menu-item> 的 index 属性值，即 'route.path' 时,页面加载时默认激活对应路由的导航项（一般配置路由重定向到首页，页面刚加载时，首页对应的导航项高亮激活）。

三、拓展

当然，其实你也可以用一种更简单的方法解决上述需求，不开启 router ，将 default-active 的属性值和需要默认高亮的 <el-menu-item> 上的 index 属性值设为 '1' ，这样页面刚加载时就有一个导航项默认为高亮激活状态。不过，使用这种方法的话，路由就需要你自己配了，这样也引不出来我接下来要讲的问题（没错，我就是为了下面这碟醋包了这顿饺子，哈哈）。

经过上面的操作，导航项的高亮和当前所在路由绑定在了一起，正常使用没什么问题，但是少数情况会产生问题。如果有两个导航条（别问，问就是客户要求的），一个顶部导航条一级路由，一个侧边导航条二级路由，当点击跳转到二级路由（子路由）时，一级路由对应的导航项失去了高亮，这很正常，因为我们路由变了，高亮跟着去二级路由了，但我还想让子路由对应的一级路由继续保持高亮该怎么办呢？

这时 default-active 的属性值就不能直接设置为 'route.path' 了，需要根据目标路由作判断 ，使用 startsWith() 方法检查路由是否以一级路由开头，是，则激活该一级路由，否，则照常激活对应一级路由。以跳转到 /aaa/bbb 为例，将 default-active 的值设为如下表达式 route.path.startsWith('/aaa') ? '/aaa' : route.path （或者定义一个计算属性接收），这样就可以在二级路由高亮时，对应一级路由继续高亮。

如果有多个需要处理的一级路由可以放在一个数组中，用 find() 方法动态匹配当前路由对应的父导航项。

const navPaths = ['/aaa', '/bbb', '/ccc']
//定义一个计算属性 activeMenu 接收
const activeMenu = computed(
  () => navPaths.find((path) => route.path.startsWith(path)) || route.path,
)

总结

总的来说， router 开启可以辅助跳转， default-active 可以设置默认高亮，两者结合可以帮助我们省些配置路由和样式的功夫，但也产生了一些新的小问题，算是有利有弊吧，大多数人可能还是选择自己配路由。在这里将这个问题和解决办法分享给大家，有需要的可以试试，有其他想法的也欢迎来讨论。