elementUI导航菜单中切换菜单项后页面跳转了但是选中菜单项不变或者与点击项不一致问题

问题

比如下方中从博客切换到标签，正常情况下选中的菜单项应该是标签（标签高亮），但是现在选中的菜单项依旧是博客或者其他菜单项。

解决方法

首先来了解一下elementUI菜单中的这两个属性：

• select：绑定点击菜单项后触发的事件，第一个参数就是菜单项所对应的 index 值。
  
• default-active：绑定当前触发的菜单项。
  

解决思路： 菜单项是否选中其实就是看 default-active 绑定的值是哪个菜单项的 index 值，所以我们在路由跳转后将 default-active 绑定的值切换为当前菜单项的 index 值即可。

具体操作： 将 index 值设置为菜单项对应的路由路径， default-active 绑定为当前路由路径（通过 $route.path 获取当前路由路径），当路由跳转时，default-active 绑定的值就会自动切换为当前路由路径的值，因为前面将菜单项 index 的值设置为菜单项对应的路由路径，所以 default-active 绑定值与当前菜单项 index 值相同，从而实现当前触发菜单项的准确性。

<el-menu
            @select="handleSelect"
            :default-active="$route.path">
            <el-menu-item index="/home">博客</el-menu-item>
            <el-menu-item index="/blogType">分类专栏</el-menu-item>
            <el-menu-item index="/blogTag">标签</el-menu-item>
            <el-menu-item index="/message">留言板</el-menu-item>
            <el-menu-item index="/blogLinks">友链</el-menu-item>
</el-menu>

handleSelect(key, keyPath) {
        this.$router.push(key)
},

👇觉得有帮助的朋友可以支持下作者哦，您的鼓励是我创作的最大动力，如有开发问题可联系作者