iView菜单active项无法高亮显示怎么办？

司徒红佑提问于 2026-03-12 09:35:16 阅读 7

组件

我在用 iView 的 Menu 组件做侧边栏导航，动态设置了 active-name，但点击菜单项后页面跳转了，高亮却没跟着变。控制台也没报错，就是不生效。

我试过在 mounted 里手动设置 this.activeName = this.$route.name，也监听了路由变化去更新，但都没用。是不是哪里写错了？

data() {
  return {
    activeName: 'home'
  }
},
watch: {
  '$route'(to) {
    this.activeName = to.name
  }
}

Menu菜单

我来解答赞 3 收藏

反馈

1 条解答

Mc.景荣 Lv1

这个问题很常见，先检查一下你的 MenuItem 是否都设置了 name 属性。

iView 的高亮逻辑是对比 active-name 和每个 MenuItem 的 name，如果 MenuItem 没写 name，那肯定高亮不了：

<Menu :active-name="activeName">

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

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

</Menu>

如果确认 MenuItem 都有 name，那问题大概率出在路由上。你打印一下 this.activeName 和 MenuItem 的 name，看看值是否完全一致（注意大小写、空格）。

另外，如果你用了 keep-alive，组件不会重新 mounted，watch 也不一定会触发。改成下面这种方式更稳妥：

watch: {

  '$route': {

    immediate: true,

    handler(to) {

      this.activeName = to.name

    }

  }

}

加上 immediate: true 会在组件创建时就执行一次，不用等路由变化。

还有一种情况：如果你的菜单是父组件，子路由跳转时父组件不会重新创建，watch 可能不触发。这种情况可以在路由守卫里更新：

beforeRouteUpdate(to, from, next) {

  this.activeName = to.name

  next()

}

你先检查下 MenuItem 的 name 属性写了没，这个是最容易踩的坑。

2026-03-12 10:03