iView Menu菜单的activeName不生效怎么办？

FSD-海淇提问于 2026-03-14 12:01:19 阅读 12

组件

我在用 iView 的 Menu 组件做侧边栏导航，想通过 activeName 控制当前激活的菜单项，但不管怎么改值，高亮始终不更新。我确认数据是响应式的，也试过 this.$nextTick，还是不行。

这是我的部分代码：

data() {
  return {
    activeMenu: 'home'
  }
},
methods: {
  handleSelect(name) {
    this.activeMenu = name;
    console.log('current:', this.activeMenu); // 能正常输出
  }
}

模板里绑定了 :active-name=”activeMenu”，但页面上就是不显示高亮，难道还要手动刷新？

我来解答赞 4 收藏

反馈

1 条解答

爱学习的凌薇 Lv1

这个问题我之前也遇到过，iView 的 Menu 的 activeName 不生效，十有八九是数据类型不匹配。

先检查一下你的 MenuItem 的 name 属性值类型：

如果你的 MenuItem 是这样写的：

<MenuItem name="1">首页</MenuItem>

而 activeMenu 是字符串 'home'，那肯定对不上。Menu 组件的 activeName 比对是严格相等的，类型不一致就不行。

解决办法：统一成字符串

data() {

  return {

    activeMenu: 'home'  // 确保是字符串

  }

}

<MenuItem name="home">首页</MenuItem>

<MenuItem name="about">关于</MenuItem>

或者两边都统一用数字：

data() {

  return {

    activeMenu: 1

  }

}

<MenuItem :name="1">首页</MenuItem>

还有一种可能：你在 Sider 里面用的是 Submenu

如果是嵌套菜单，记得给 Submenu 同样设置 name，然后用 active-sub-name 来控制：

<Submenu name="system">

    <template slot="title">系统管理</template>

    <MenuItem name="user">用户管理</MenuItem>

</Submenu>

然后绑定：

<Menu active-sub-name="system">

你先把 MenuItem 的 name 打印出来看看，确认类型是否一致，大概率就是这个问题。

2026-03-14 12:02