vue+element 实现动态菜单

铛铛猫

已于 2022-04-28 14:13:08 修改

阅读量658

点赞数 1

文章标签： elementui vue

于 2022-04-28 14:06:10 首次发布

本文链接：https://blog.csdn.net/qq_42702425/article/details/124471749

版权

这篇博客介绍如何在后台管理系统中，基于用户权限利用Vue和ElementUI的el-menu组件及递归方法动态生成菜单导航。详细步骤包括el-menu导航的设置和递归组件的实现。

摘要由CSDN通过智能技术生成

vue+element 实现动态菜单！

文章目录

vue+element 实现动态菜单！
前言
一、实现思路
二、使用步骤
- 1. el-menu导航
- 2.递归组件

前言

后台管理项目，希望根据登录人权限的不同，配置不同的菜单导航

一、实现思路

主要是利用element-ui中 el-menu 组件 + 递归实现

二、使用步骤

1. el-menu导航

代码如下（示例）：

<template>
	<el-menu :default-active="$route.fullPath" router  mode="horizontal"
        class="layout-menu" 
        text-color="rgba(255,255,255,0.7)"
        active-text-color="#ffd04b" >
          <el-menu-item index="/home">首页</el-menu-item>
          <template v-for="items in menuRoutes">
            <!--有子级菜单-->
            <el-submenu :key="items.id" :index="items.id+''" 
            	v-if="items.children && items.children.length > 0">
	              <template slot="title">
	                <span>{
   {
    items.title }}</span>
	              </template>
	              <!-- 循环调用 递归组件--