TDesign Menu 菜单激活项不随路由变化更新怎么办？

Top丶文华提问于 2026-03-19 08:18:22 阅读 17

组件

我用 TDesign 的 Menu 组件做侧边栏导航，菜单项绑定了 router-link，但切换路由后 active 项没自动高亮。明明路径变了，菜单却还停留在上一个页面的选中状态，这是哪出问题了？

我试过给 Menu 的 value 属性绑定当前路由路径，也监听了 $route 变化去手动更新，但都没生效。代码大概长这样：

const currentRoute = computed(() => {
  return route.path; // 比如 '/dashboard' 或 '/user/list'
});

// 在模板里传给 Menu: :value="currentRoute"

我来解答赞 5 收藏

反馈

1 条解答

旗施的笔记 Lv1

这个问题很简单，你没开路由模式。

TDesign 的 Menu 组件需要设置 router 属性才会自动监听路由变化高亮菜单项，光绑 value 是不够的。

解决办法：给 Menu 加上 :router="true"

<t-menu :value="currentRoute" :router="true">

  <t-menu-item value="/dashboard" to="/dashboard">Dashboard</t-menu-item>

  <t-menu-item value="/user/list" to="/user/list">用户列表</t-menu-item>

</t-menu>

关键点：
1. Menu 组件加 :router="true"
2. MenuItem 用 to 属性指定路由，不要用 router-link 组件

如果你不想用路由模式，也可以手动控制激活项，用 active 属性而不是 value：

const activeMenu = ref(route.path);



// 监听路由变化更新

watch(() => route.path, (newPath) => {

  activeMenu.value = newPath;

});

<t-menu :active="activeMenu">

  ...

</t-menu>

第一种方式最省事，开个 router 模式就行。

2026-03-19 08:19