el-menu路由切换时菜单高亮不切换

3,727 阅读1分钟

项目用的是vue-admin模板,各路由之前是用tab切换,首页菜单不在左侧导航显示。

出现的问题:当从其他路由切换到“首页”的时候,左侧菜单高亮还是停留在上个路由菜单,如下图:


从element源码可以看到,左侧高亮的逻辑是通过参数el-menu参数default-active,和el-menu-item参数index控制,源码位置/packages/menu/src/menu-item

computed: {
    active() {       
        return this.index === this.rootMenu.activeIndex;
    }
}

在这里可以追溯到文件/packages/menu/src/menu:

data() {
    return {
        activeIndex: this.defaultActive // activeIndex就是defaultActive
    }
}

找到了菜单高亮的原理自然想到了在代码中打印看下这两个值是否一致:


从这里可以看到当切换到首页的时候,打印的activeIndex值还是上个路由的,所以可以在这里手动更改这个activeIndex为当前路由值。

watch中添加:

watch: {
    activeMenu() {
        this.$refs.menu.activeIndex = this.activeMenu
    }
}

这样问题就解决了,但是为什么在切换的时候没有主动触发更新还不清楚,再继续研究研究,有大佬知道的话可以指导一下!