Vue Router子路由配置：主组件点击仅显子菜单并保持激活态

需求说明 #

• 点击Dashboard/Apps主菜单时，仅展开对应子菜单，不触发主菜单自身的路由跳转
• 展开子菜单的主菜单需添加active类标识
• 子菜单点击正常跳转对应页面

修改后的代码实现 #

app.vue

<template>
  <!-- 用普通div替代router-link，避免默认跳转行为，手动绑定active类 -->
  <div 
    class="menu-item" 
    :class="{ active: showName === 'dashboard' }"
    @click="toggleMenu('dashboard')"
  >
    Dashboard
  </div>
  <div 
    class="menu-item" 
    :class="{ active: showName === 'apps' }"
    @click="toggleMenu('apps')"
  >
    Apps
  </div>

  <div class="children">
    <div class="dashboard" v-show="showName === 'dashboard' && isMenuOpen">
      <router-link exact :to="{name:'home'}">Home</router-link>
      <router-link exact :to="{name:'about'}">About</router-link>
    </div>

    <div class="apps" v-show="showName === 'apps' && isMenuOpen">
      <router-link exact :to="{name:'setting'}">Setting</router-link>
      <router-link exact :to="{name:'profile'}">Profile</router-link>
    </div>
  </div>

  <div class="container">
    <router-view/>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const showName = ref('')
const isMenuOpen = ref(false)

function toggleMenu(name) {
  // 点击当前已展开的菜单，切换折叠状态
  if (showName.value === name) {
    isMenuOpen.value = !isMenuOpen.value
  } else {
    // 点击其他菜单，直接展开对应子菜单
    showName.value = name
    isMenuOpen.value = true
  }
}
</script>
<style scoped>
.menu-item.active {
  color: #409eff;
  font-weight: bold;
  /* 可自定义active样式 */
}
</style>

router.js（核心逻辑无需修改）

原路由配置保持不变，子菜单的路由跳转逻辑正常生效：

import {createRouter, createWebHistory, RouterView} from 'vue-router'

const routes = [
  {
    path: '/dashboards',
    name: 'dashboards',
    component: RouterView,
    children: [
      {
        path: 'home',
        component: () => import('../Views/home.vue'),
        name: 'home',
      },
      {
        path: 'about',
        component: () => import('../Views/about.vue'),
        name: 'about',
      },
    ]
  },
  {
    path: '/apps',
    name: 'apps',
    component: RouterView,
    children: [
      {
        path: 'setting',
        component: () => import('../Views/setting.vue'),
        name: 'setting',
      },
      {
        path: 'profile',
        component: () => import('../Views/profile.vue'),
        name: 'profile',
      },
    ]
  },
];

const router = createRouter({
  linkActiveClass: "item-active",
  linkExactActiveClass: "exact-active",
  history: createWebHistory(),
  routes
})
export default router;

关键修改点说明 #

1. 替换router-link为普通元素：主菜单不需要路由跳转，用<div>替代<router-link>，避免默认跳转行为
2. 手动绑定active类：通过showName的值判断当前激活的主菜单，动态添加active类
3. 简化菜单切换逻辑：toggleMenu函数处理两种场景：点击当前已展开菜单时切换折叠状态；点击其他菜单时直接展开对应子菜单
4. 保留子菜单路由跳转：子菜单的<router-link>保持原样，正常跳转对应页面

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