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

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

组件

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

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

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

Menu菜单

我来解答赞 10 收藏

反馈

2 条解答

令狐西西 Lv1

看起来你在用 iView 的 Menu 组件时遇到了 active 高亮的问题。从你的描述来看，已经在 mounted 和 watch 里做了处理，但可能还是有一些细节需要注意。

建议改成在 created 钩子中初始化 activeName，确保在组件创建时就根据当前路由设置 active 状态。同时，确保路由名称和 activeName 对应正确。可以尝试如下修改：

created() {

  this.activeName = this.$route.name;

},

watch: {

  '$route'(to) {

    this.activeName = to.name;

  }

}

这样能确保在组件挂载之前就已经根据路由设置了 active 状态。如果问题依然存在，检查一下路由配置和菜单项的 name 属性是否一致，有时候小写大写不一致也会导致这个问题。

2026-03-24 05:03

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