Vue3 根据路由配置实现动态菜单

于 2025-06-29 18:29:26 发布
阅读量846 收藏 29
点赞数 24
CC 4.0 BY-SA版权
分类专栏： 前端 vue 文章标签： vue css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_62254095/article/details/149000109

前言

最近在学习Vue3的相关语法，在阅读官方文档的时候觉得官方文档的菜单栏比较简洁美观，于是想着能不能自己实现一个类似的多级菜单。代码大部分由AI所做（感谢活在这个人工智能时代）。
在这里插入图片描述

设计

主要就是路由设计以及菜单设计

路由设计

在src/router/intex.js 中进行路由配置，配置的信息示例如下：

import Home from "@/app/Home.vue"
import {createRouter, createWebHistory} from "vue-router";
import Layout from "@/app/Layout.vue";
import Demo1 from "@/app/Demo1.vue";
import Demo2 from "@/app/Demo2.vue";
import Demo3 from "@/app/Demo3.vue";
import About from "@/app/About.vue";


const routes = [
    {
        path: '/',
        name: '首页',
        component: Home,
    },
    {
        path: '/demo',
        name: '演示',
        component: Layout,
        children: [
            {
                path: 'demo1',
                name: '演示1',
                component: Demo1
            },
            {
                path: 'demo-sub',
                name: '演示子菜单1',
                component: Layout,
                children: [
                    {
                        path: 'demo2',
                        name: '演示2',
                        component: Demo2
                    },
                    {
                        path: 'demo-sub2',
                        name: '演示子菜单2',
                        component: Layout,
                        children: [
                            {
                                path: 'demo3',
                                name: '演示3',
                                component: Demo3
                            }
                        ]
                    },
                ]
            },
        ]
    },
    {
        path: '/about',
        name: '关于',
        component: About,
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

各参数解释如下：

  • path：跳转的路由信息
  • name：菜单项名称
  • component：菜单显示页面组件
  • children：所包含子路由

菜单设计

菜单由两个组件实现：src/components/MenuDropdown.vue、src/components/AdvancedMenu.vue，同时使用递归思想实现多级菜单渲染。

MenuDropdown 组件

递归子菜单组件，负责：

  • 渲染子菜单项
  • 支持无限层级嵌套
  • 处理子菜单的悬停事件
  • 提供动画效果

显示的的子菜单，主菜单 AdvancedMenu组件中调用，如果有子菜单，则显示子菜单下拉框，效果如下图（具体显示位置有css控制）：
在这里插入图片描述

组件主要代码如下：

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import MenuDropdown from './MenuDropdown.vue'

// 定义props
const props = defineProps({
  routes: {
    type: Array,
    required: true
  },
  level: {
    type: Number,
    default: 1
  },
  parentPath: {
    type: String,
    default: ''
  }
})

const route = useRoute()
const activeSubmenu = ref(null)

// 检查是否有子菜单
const hasChildren = (route) => {
  return route.children && route.children.length > 0
}

// 获取完整的路由路径
const getFullPath = (route) => {
  if (props.parentPath) {
    // 如果有父路径，拼接完整路径
    return `${props.parentPath}/${route.path}`
  }
  return route.path
}

// 检查当前路由是否匹配
const isCurrentRoute = (routePath) => {
  const fullPath = getFullPath(routePath)
  return route.path === fullPath
}

// 检查当前路由是否属于某个父菜单
const isCurrentRouteInParent = (parentRoute) => {
  if (!hasChildren(parentRoute)) return false
  
  const currentPath = route.path
  const parentFullPath = getFullPath(parentRoute)
  
  return currentPath.startsWith(parentFullPath)
}

// 处理鼠标进入子菜单
const handleMouseEnter = (route) => {
  if (hasChildren(route)) {
    activeSubmenu.value = route.name
  }
}

// 处理鼠标离开子菜单
const handleMouseLeave = (route) => {
  setTimeout(() => {
    if (activeSubmenu.value === route.name) {
      activeSubmenu.value = null
    }
  }, 200)
}
</script>
<template>
  <div
      class="dropdown-menu"
      :class="[`level-${level}`]"
  >
    <ul class="submenu-list">
      <li
          v-for="route in routes"
          :key="route.path"
          class="submenu-item"
          @mouseenter="handleMouseEnter(route)"
          @mouseleave="handleMouseLeave(route)"
      >
        <!-- 有子菜单的父菜单项 -->
        <div
            v-if="hasChildren(route)"
            class="submenu-link parent-submenu"
            :class="{ 
              'active': activeSubmenu === route.name || isCurrentRouteInParent(route)
            }"
        >
          <span class="submenu-text">{{ route.name }}</span>
          <span class="submenu-arrow">▶</span>
        </div>

        <!-- 没有子菜单的菜单项 -->
        <router-link
            v-else
            :to="getFullPath(route)"
            class="submenu-link"
            :class="{ 'active': isCurrentRoute(route) }"
        >
          <span class="submenu-text">{{ route.name }}</span>
        </router-link>

        <!-- 递归渲染子菜单 -->
        <Transition name="submenu">
          <MenuDropdown
              v-if="hasChildren(route) && activeSubmenu === route.name"
              :routes="route.children"
              :level="level + 1"
              :parent-path="getFullPath(route)"
          />
        </Transition>
      </li>
    </ul>
  </div>
</template>
AdvancedMenu 组件

主要的菜单组件，负责：

  • 读取路由配置
  • 渲染顶级菜单项
  • 处理鼠标悬停事件
  • 管理菜单状态

显示完整的顶部菜单项（不含子菜单），效果如图：
在这里插入图片描述

组件主要代码如下：

<script setup>
// 获取路由配置
import {computed, ref} from "vue";
import {useRouter, useRoute} from "vue-router";
import MenuDropdown from "@/components/MenuDropdown.vue";

const router = useRouter()
const route = useRoute()
const activeDropdown = ref(null)

// 获取路由配置
const menuRoutes = computed(() => {
  return router.options.routes;
})

// 检查是否有子菜单
const hasChildren = (route) => {
  return route.children && route.children.length > 0
}

// 检查当前路由是否属于某个父菜单
const isCurrentRouteInParent = (parentRoute) => {
  if (!hasChildren(parentRoute)) return false
  
  // 检查当前路由路径是否以父路由路径开头
  const currentPath = route.path
  const parentPath = parentRoute.path
  
  // 如果父路径是根路径，需要特殊处理
  if (parentPath === '/') {
    return currentPath !== '/' && currentPath.startsWith('/')
  }
  
  return currentPath.startsWith(parentPath)
}

// 处理鼠标进入主菜单
const handleMouseEnter = (route) => {
  if (hasChildren(route)) {
    activeDropdown.value = route.name
  }
}

// 处理鼠标离开主菜单
const handleMouseLeave = (route) => {
  setTimeout(() => {
    if (activeDropdown.value === route.name) {
      activeDropdown.value = null
    }
  }, 200)
}

</script>

<template>
  <nav class="advanced-menu">
    <div class="menu-container">
      <ul class="menu-list">
        <li
            v-for="route in menuRoutes"
            :key="route.path"
            class="menu-item"
            @mouseenter="handleMouseEnter(route)"
            @mouseleave="handleMouseLeave(route)"
        >
          <!-- 有子菜单的父菜单项-->
          <div
              v-if="hasChildren(route)"
              class="menu-link parent-menu"
              :class="{
                'active': activeDropdown === route.name || isCurrentRouteInParent(route)
              }"
          >
            <span class="menu-text">{{ route.name }}</span>
            <span class="dropdown-arrow">▼</span>
          </div>

          <!-- 没有子菜单的菜单项-->
          <router-link
              v-else
              :to="route.path"
              class="menu-link"
              active-class="active"
          >
            <span class="menu-text">{{ route.name }}</span>
          </router-link>

          <!--  递归渲染子菜单-->
          <Transition name="dropdown">
            <MenuDropdown
                v-if="hasChildren(route) && activeDropdown === route.name"
                :routes="route.children"
                :level="1"
                :parent-path="route.path"
            />
          </Transition>
        </li>
      </ul>
    </div>
  </nav>
</template>
递归思路

1、首先在AdvancedMenu 组件中根据配置的路由信息routes 进行循环渲染。如果路由route 没有children属性即子路由，直接使用router-link渲染即可（可点击）；如果存在子路由，使用div渲染（不可点击），并在右侧加入箭头表示有子菜单。

<template>
  <nav class="advanced-menu">
    <div class="menu-container">
      <ul class="menu-list">
        <li
            v-for="route in menuRoutes"
            :key="route.path"
            class="menu-item"
            @mouseenter="handleMouseEnter(route)"
            @mouseleave="handleMouseLeave(route)"
        >
          <!-- 有子菜单的父菜单项-->
          <div
              v-if="hasChildren(route)"
              class="menu-link parent-menu"
              :class="{
                'active': activeDropdown === route.name || isCurrentRouteInParent(route)
              }"
          >
            <span class="menu-text">{{ route.name }}</span>
            <span class="dropdown-arrow">▼</span>
          </div>

          <!-- 没有子菜单的菜单项-->
          <router-link
              v-else
              :to="route.path"
              class="menu-link"
              active-class="active"
          >
            <span class="menu-text">{{ route.name }}</span>
          </router-link>

          <!--  递归渲染子菜单-->
          <Transition name="dropdown">
            <MenuDropdown
                v-if="hasChildren(route) && activeDropdown === route.name"
                :routes="route.children"
                :level="1"
                :parent-path="route.path"
            />
          </Transition>
        </li>
      </ul>
    </div>
  </nav>
</template>

2、如果在AdvancedMenu 组件中渲染的路由route有子路由，则将该route.children信息传递给MenuDropdown子菜单组件。同时传递该路由的层级level、路由的地址path，便于子菜单的渲染和路由的正确跳转。

 <!--  递归渲染子菜单-->
          <Transition name="dropdown">
            <MenuDropdown
                v-if="hasChildren(route) && activeDropdown === route.name"
                :routes="route.children"
                :level="1"
                :parent-path="route.path"
            />
          </Transition>

3、MenuDropdown子菜单组件与AdvancedMenu 主菜单组件类似，根据传来的routes、level、path信息，进行对应的渲染。如果路由route 没有children属性即子路由，直接使用router-link渲染即可（可点击）；如果存在子路由，使用div渲染（不可点击），并在右侧加入箭头表示有子菜单。

 <!-- 递归渲染子菜单 -->
        <Transition name="submenu">
          <MenuDropdown
              v-if="hasChildren(route) && activeSubmenu === route.name"
              :routes="route.children"
              :level="level + 1"
              :parent-path="getFullPath(route)"
          />
        </Transition>

效果图

在这里插入图片描述

总结

本项目基本实现了基于Vue3根据路由配置动态生成多级菜单的功能，且UI仿照Vue官方文档设计简洁美观，动画流畅。不过作者表述能力不佳，具体实现可参考完整代码。

项目完整代码

https://github.com/Seven11111/vue-menu

七、【前端路由篇】：Vue Router 实现页面导航、动态路由与权限控制
blues_C的博客
05-26 1278
在单页应用 (SPA) 中，路由系统是灵魂。它负责根据用户在浏览器地址栏输入的 URL，或者用户在页面上的点击操作，来决定渲染哪个组件，从而实现页面内容的切换，而无需重新加载整个 HTML 页面。 Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，使得构建 SPA 变得非常简单。
Vue3实现动态菜单功能
bjzhang75的博客
10-01 857
Vue3实现动态菜单功能
vue3 动态添加路由并生成左侧菜单栏
hxxxxx111的博客
03-13 1127
vue3 动态添加路由并生成左侧菜单栏
vue3动态路由+菜单栏的实现示例
菜鸟教程
05-09 3191
动态添加路由只要提前定义好服务器数据，约定好格式，做起来还是很简单的。只要能根据component字段正确的导入组件就没什么大问题，不过这只是一个简单的示例，实际开发还是有很多情况要处理的。到此这篇关于vue3动态路由+菜单栏的实现示例的文章就介绍到这了,更多相关vue3动态路由+菜单栏内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！
vue3+element-plus+vite制作动态路由菜单
weixin_45727747的博客
11-20 1992
适用于vue3+vite+element-plus+ts搭建的动态路由菜单解决方案
Vue3 根据路由动态生成Menu左侧菜单栏
好记性，不如烂键盘。
01-24 3242
根据路由动态生成Menu左侧菜单栏
【vue3动态路由】
qq_45617169的博客
07-16 1054
还有一点，页面刷新时跳转404页面问题，来不及刷新就跳到了404，因为我修改的顺序有点乱，不知道是哪里有的效果。可能是因为404这个不要写在index.ts中，分别写到user.ts和根据菜单添加路由的最后(总之就是要放在最后面，不然可能先去404了，可能有用，也可能上面刷新的写对了就行)。动态路由在页面刷新后就没有了，只有注册router时的index.ts中的路由，因此需要在main.ts中刷新。之后刷新页面时根据localStorage中的菜单数据(包括路由信息)添加到路由中即可。
Vue结合路由配置递归实现菜单栏功能
10-15
在Vue.js应用中，结合Vue Router进行菜单栏的动态渲染是一项常见的需求。本文将通过一个实例，探讨如何利用递归组件来实现一个包含一级、二级和三级菜单的多功能菜单栏。 首先，我们要创建一个基础的Vue项目，并...
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
11-19
总的来说，通过Vue.js结合Element UI，利用动态加载路由的方式，我们可以实现灵活的、基于权限的三级菜单页面显示，这不仅提高了用户体验，也简化了代码维护。在处理路由时，务必注意路由的配置、菜单的渲染以及与...
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
11-26
总结来说，结合 Vue Router 的 `addRoutes` 和 Vuex，我们可以有效地实现动态加载路由和菜单，从而实现基于用户角色的权限控制。这个方案既简单又灵活，能够适应后台管理系统中常见的权限管理需求。
vue3-elementPlus-admin:vue3后台管理模板 , 基于vue3.0 + elementPlus 实现的后台管理系统模板 动态路由 动态菜单 皮肤切换 登录逻辑
05-10
v3-element 基于vue3.x 实现的后台管理系统模板 1、 登录逻辑. 2、 基本布局(基于elementPlus) 3、 动态路由逻辑 4、 动态菜单栏逻辑 5、 面包屑 6、 皮肤切换 7、 假数据模拟路由菜单 gif示例 Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Customize configuration See .
vue3动态路由+菜单权限实现
XL984507092的博客
02-25 285
在这里需要注意一件事情，在 main.ts 中 init 方法必须用 async / await 因为必须要保证路由初始化完成在去挂载 router,这样保证在挂载路由的时候，接口的路由信息已经返回了，不然就会到404页面。
如何在vue3中实现动态路由
程序员柚子的博客
07-06 4864
如何快速建立vue3动态路由
vue3动态路由
最新发布
m0_61618849的博客
04-13 661
import.meta.glob动态的去拼接获取文件,把后台返回内容转换成() => import('xxxx')格式。要想实现vite+vue-router实现动态路由我们需要用到。出现404的话比如说你在路由表中维护了下面路由映射。我们可以新建一个permission.ts文件。去控制是否放行以及去哪个页面，但是在新版本的。之前我们使用导航守卫的时候需要一个参数。以下代码仅供参考，有很多需要完善的地方。官方文档中addRoute的使用。当我们添加一个主路由的时候。添加子路由也就是嵌套路由。
vue3+element-plus实现动态菜单和动态路由动态按钮的后台权限管理系统（前后端分离）
热门推荐
m0_72618563的博客
08-10 2万+
使用addRoute实现动态路由，使用递归实现动态菜单渲染，使用v-if实现动态按钮
Vue3.0中实现的动态路由权限控制
weixin_43883615的博客
07-15 1799
动态路由权限控制是项目常用的功能，这里介绍一种方式，通过将后端权限码与本地路由的JSON配置ID进行匹配，能够有效地实现用户权限的控制。不同角色的操作项是根据权限码匹配到的路由进行区分的，这样可以确保每个用户只能看到与自己所属角色相关的操作项。随后，通过特定方法将其转换为路由格式，并通过addRoute方法动态添加路由，从而实现了灵活而精准的用户权限路由控制。
vue3+element-plus 实现动态菜单和动态路由的渲染
gt8011的博客
07-23 5600
这个组件通过 Vue Router 的useRouter钩子获取当前路由的配置信息，并根据这些信息动态生成菜单项。使用computed属性来区分哪些路由有子菜单，哪些没有，然后相应地渲染或。点击菜单项时，使用方法来改变页面的路由，实现导航功能。并通过useRoute钩子获取当前激活的路由，然后设置activeMenu来决定哪个菜单项应该处于激活状态。
Vue3管理系统左侧动态菜单实现
Sunset_21的博客
02-05 703
vue3动态路由实现
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值