Vue 3多独立v-list间active-class单选状态异常求助

问题根源 #

1. 多个<v-list>独立运行，各自维护内部的激活状态，没有全局统一控制，导致跨List的项可能同时处于激活状态
2. 部分v-list-item未正确配置路由匹配规则或value绑定，自动激活逻辑出现混乱
3. V-List 2的子项未与其他List项共享激活状态判断逻辑

解决方案 #

通过全局维护激活状态+手动绑定active属性，替代Vuetify默认的独立List激活逻辑，实现全导航区域的单选效果。

步骤1：主组件添加全局激活状态

<template>
  <v-navigation-drawer v-model="leftNavigation" @click="drawer = false">
    <div>
      <v-list nav active-class="activeNav">
        <v-list-item 
          title="V-List 1: Item 1" 
          :to="routeUsed"
          :active="activeNavItem === 'home'"
          @click="activeNavItem = 'home'"
        ></v-list-item>
        <v-list-item 
          title="V-List 1: Item 2" 
          :active="activeNavItem === 'item2'"
          @click="activeNavItem = 'item2'"
        ></v-list-item>
      </v-list>

      <div v-if="session.navOption == 'Something'">
        <Vlist2Nav 
          :menu="menuItems" 
          :activeNavItem="activeNavItem"
          @update:active="activeNavItem = $event"
        />
      </div>
    </div>
  </v-navigation-drawer>
</template>

<script setup>
import Vlist2Nav from "@/components/ui/vlist2-Nav.vue";
import { ref, computed } from 'vue';

const leftNavigation = ref(true);
const drawer = ref(true);
const session = ref({ /* 你的session数据 */ });
// 全局激活项标识，初始值可根据当前路由设置
const activeNavItem = ref('home');

const routeUsed = computed(() => 
  `/sess/${session.value?.id}/${session.value?.terms}/Home`
);
</script>

步骤2：修改Vlist2-Nav组件，同步全局状态

<template>
  <v-list nav active-class="activeNav">
    <v-list-group 
      v-for="item in menu" 
      :key="item.title" 
      :id="getId(item.title)"
    >
      <!-- 父项不可激活，无需绑定状态 -->
      <template v-slot:activator>
        <v-list-item :title="item.title"></v-list-item>
      </template>
      <!-- 子项绑定全局激活状态 -->
      <template v-if="!close">
        <v-list-item 
          v-for="subItems in item.items" 
          :key="subItems.title" 
          :title="subItems.title" 
          :to="getSubItemRoute(subItems)"
          :active="activeNavItem === subItems.key"
          @click="$emit('update:active', subItems.key)"
        ></v-list-item>
      </template>
    </v-list-group>
  </v-list>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  menu: {
    type: Array,
    required: true
  },
  activeNavItem: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['update:active']);

// 修正路由跳转路径，确保和路由配置一致
const getSubItemRoute = (subItem) => {
  return `/sess/${session.value?.id}/${session.value?.terms}/Terms/New`;
};

const getId = (title) => {
  return title.toLowerCase().replace(/\s+/g, '-');
};
</script>

步骤3：修正路由配置的细节

import { RouteRecordRaw } from "vue-router"; // 原代码导入vuex错误，修正为vue-router
const navigationPage = () => import("@/views/LeftNavigationView.vue");
const home = () => import("@/views/Terms/Home.vue");
const newTerm = () => import("@/views/Terms/Func/New.vue")

const routes: Array<RouteRecordRaw> = [
  {
    path: "/sess/:id/Terms", // 补全参数占位符
    redirect: (from) => `/sess/${from.params.id}/Terms/Home`,
    component: navigationPage,
    children: [
      { 
        path: "Home", 
        component: home,
        name: 'home' // 添加name，方便状态匹配
      },
      { 
        path: "New", 
        component: newTerm,
        name: 'new-term' // 添加name
      },
    ],
  },
]

关键注意点 #

• 所有可激活的v-list-item必须绑定统一的active状态，避免Vuetify自动匹配导致的冲突
• 点击事件必须同步更新全局激活状态，确保单选逻辑生效
• 路由跳转的to属性必须和路由配置的路径完全一致，否则自动激活逻辑会出错
• 修正原代码中的语法错误（如v-list-item:title缺少空格、computed未闭合、导入模块错误），否则会导致状态异常

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