Vuetify 3升级后v-list高亮激活项问题求助

问题背景 #

非前端开发人员在将Vue/Vuetify2旧项目升级到Vuetify3时，遇到路由匹配时v-list-item高亮激活的问题。原Vuetify2的computed实现方式无法适配新版组件API，且v-list的selected属性无明确使用文档，现有代码无法实现this.$route.name === routeName时对应列表项高亮的需求。

修改后的实现代码 #

模板部分 #

<v-list density="compact" :model-value="activeRouteName" @update:model-value="handleRouteChange">
  <v-list-item
    v-for="item in items"
    :key="item.routeName"
    link
    nav
    :disabled="item.disabled"
    :prepend-icon="item.icon || null"
    :title="item.title"
    :value="item.routeName"
    :active="item.routeName === activeRouteName"
  />
</v-list>

脚本部分 #

<script>
import AppLayoutContent from '@/components/AppLayoutContent.vue'

export default {
  name: 'AppLayout',
  components: {
    AppLayoutContent,
  },
  data: () => ({
    items: [
      {
        title: 'Home',
        icon: 'mdi-home',
        routeName: 'Home'
      },
      {
        title: 'Settings',
        icon: 'mdi-cog-outline',
        routeName: 'Settings',
      }
    ]
  }),
  computed: {
    activeRouteName() {
      return this.$route.name
    }
  },
  methods: {
    handleRouteChange(selectedRoute) {
      if (selectedRoute && selectedRoute !== this.activeRouteName) {
        this.$router.push({ name: selectedRoute })
      }
    }
  }
}
</script>

关键改动说明 #

• 适配Vuetify3组件API：将旧版v-list的selected属性替换为新版的model-value，用@update:model-value监听选中状态变化
• 显式控制激活状态：给每个v-list-item绑定:active属性，直接通过当前路由名称与列表项的routeName对比，判断是否高亮
• 简化路由切换逻辑：Vuetify3单选模式下，@update:model-value返回单个选中值而非数组，无需额外处理数组索引
• 实时同步路由状态：新增activeRouteName计算属性，实时获取当前路由名称，确保路由变化时列表项激活状态自动更新

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