Vue中路由路径存在包含关系时侧边栏导航项被同时选中的问题求助

这个问题我之前开发Vuetify应用时也踩过坑！核心原因是Vuetify的v-list-item-group默认采用路径部分匹配来判断激活状态——当你在/help路径下时，根路径/会被认为是它的子路径，所以对应的Dashboard导航项也会被标记为选中。

下面是两种可靠的解决方法，推荐第一种，因为用路由名称匹配更精准：

方法一：通过路由名称绑定激活状态 #

利用v-list-item-group的v-model和路由的唯一名称来精准匹配，避免路径部分匹配的问题。

修改后的模板代码： #

<template>
  <div>
    <v-navigation-drawer v-model="drawer">
      <v-list nav dense>
        <!-- 绑定v-model到当前路由名称 -->
        <v-list-item-group v-model="activeRouteName">
          <v-list-item 
            v-for="link in links" 
            :key="link.text" 
            :to="link.route"
            <!-- 给每个item设置对应路由的name作为value -->
            :value="link.route.name"
          >
            <v-list-item-content>
              <v-list-item-title class="white--text">{{ link.text }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

修改后的脚本代码： #

<script>
export default {
  data: () => ({
    drawer: true,
  }),
  computed: {
    links() {
      return [
        {
          text: "Dashboard",
          route: { name: "dashboard" },
        },
        {
          text: "Help",
          route: { name: "help" },
        },
      ];
    },
    // 计算当前激活的路由名称
    activeRouteName() {
      return this.$route.name;
    }
  },
};
</script>

方法二：给路由添加精确匹配标识 #

如果更倾向于用路径匹配，可以在跳转的路由对象中添加exact: true，强制v-list-item只在路径完全匹配时才激活：

修改links中的路由配置： #

links() {
  return [
    {
      text: "Dashboard",
      // 添加exact: true，强制精确匹配根路径
      route: { name: "dashboard", exact: true },
    },
    {
      text: "Help",
      route: { name: "help" },
    },
  ];
},

这种方法适合简单场景，但如果有嵌套路由的话，还是方法一的路由名称匹配更稳定，因为路由名称是全局唯一的，不会出现路径重叠的问题。

内容的提问来源于stack exchange，提问作者Weronika