vue递归实现左侧菜单栏功能+动态路由实现

借鉴博客：https://www.jianshu.com/p/6b34abeb6db7

 

一、在你的左侧菜单组件页面里，找到菜单栏标签代码，换成下面这段代码：

 <el-container>
    <el-aside>
       <el-menu
          router
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <home-left :navMenus="leftMenus"/>
       </el-menu>
    </el-aside>
 </el-container>
 <el-main>
    <router-view/>
 </el-main>



js部分：关键在于引入的子组件home-left.vue，递归菜单数据的代码写这里面

import HomeLeft from "./home-left.vue";
export default {
    components: {HomeLeft},
    data() {
        return {
            leftMenus: [
                {
                    title : '用户管理',
                    url: '/user',
                    icon : 'el-icon-user-solid',
                },
                {
                    title : '商品',
                    url: '/products',
                    icon : 'el-icon-s-goods',
                    children : [
                        {
                            title : '品类管理',
                            url: '/category',
                            icon : 'bars',
                        },
                        {
                            title : '商品管理',
                            url: '/product',
                            icon : 'tool',
                            children : [
                                {
                                    title : '品类管理(第三级)',
                                    url: '/category',
                                    icon : 'bars',
                                },
                                {
                                    title : '商品管理(第三级)',
                                    url: '/product',
                                    icon : 'tool',
                                }
                            ]
                        }
                    ]
                },
                {
                    title : '用户管理',
                    url: '/userss',
                    icon : 'user',
                },
                {
                    title : '角色管理',
                    url: '/role',
                    icon : 'safety'
                },
                {
                    title : '图形图表',
                    url: '/charts',
                    icon : 'area-chart',
                    children: [
                        {
                            title : '柱线图',
                            url: '/charts/bar',
                            icon : 'bar-chart'
                        },
                        {
                            title : '折线图',
                            url: '/charts/line',
                            icon : 'line-chart'
                        },
                        {
                            title : '饼图',
                            url: '/charts/pie',
                            icon : 'pie-chart'
                        },
                    ]
                },
            ],

 　　　　};
    }
};

 

二、创建子组件home-left.vue，递归菜单数据的关键代码就写在子组件home-left.vue中

<template>
    <div class="navMenu">
        <label v-for="navMenu in navMenus">
            <!--只有一级菜单-->
            <el-menu-item v-if="!navMenu.children"
                          :index="navMenu.url"
                          :route="navMenu.url"
            >
                <!--图标-->
                <i :class="navMenu.icon"></i>
                <!--标题-->
                <span slot="title">{{navMenu.title}}</span>
            </el-menu-item>
            <!--有多级菜单-->
            <el-submenu v-if="navMenu.children"
                        :key="navMenu.url"
                        :index="navMenu.url"
            >
                <template slot="title">
                    <i :class="navMenu.icon"></i>
                    <span> {{navMenu.title}}</span>
                </template>
                <!--递归组件，把遍历的值传回子组件，完成递归调用-->
                <nav-menu :navMenus="navMenu.children"></nav-menu>
            </el-submenu>
        </label>

    </div>
</template>

<script>
    export default {
        name: 'NavMenu', //使用递归组件必须要有
        props: ['navMenus'], // 传入子组件的数据
        data() {
            return {}
        },
        methods: {
            handleSelect(key,keyPath){
                console.log('1212')
                console.log(key,keyPath)
            }
        }
    }
</script>

<style scoped>

</style>

 

 

三、没任何毛病，直接看效果：

 

 

 

 ==============实现动态路由========================================

业务场景：根据登陆账号的不同权限，动态加载左侧菜单列表；后端直接返回的路由菜单数据

 

　　1、在网上百度了一大堆，最后我发现不用动态路由也是一样的。

　　　　后台返回此账号的所有菜单list，然后直接赋值给上面的leftMenus:[]数组变量就行了，后台已经处理好了这账号是什么角色，此角色只有哪些菜单list数据，返给前端哪些菜单list数据，前端加载出来就行了。

 

 　　2、我的路由index.js文件，内容：【只要后台返回的leftMenus[]数组中，每个菜单中的url字段的值如：/user，在index.js路由里能找到对应的路由path: '/user'，点击就能跳转】

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from "../components/HelloWorld";

//使用@它会自动找到src下的文件夹,这webpack的封装功能
import Login from "../components/login/login.vue";
import Main from "../components/home/main.vue";
import TestDialog from "../components/home/testDialog.vue";
import User from "../components/user/userList.vue";

import MyFile from "../components/home/myFile.vue";

Vue.use(Router)

export default new Router({
    routes: [
        {
            path:'/',           //这个表示的是根目录，即一进入的页面
            redirect:'login'    //设置页面一进来就显示的页面，即重定向到goods组件，这里写的内容是对应组将的component的值
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        },

        {
            path: '/main',
            name: 'main',
            component: Main,
            children: [
                {
                    path: '/myFile',
                    name: "myFile",
                    component: MyFile,

                },

                {
                    path: '/testDialog',
                    name: "testDialog",
                    component: TestDialog,

                },
                {
                    path: '/user', //用户管理列表页面
                    name: 'user',
                    component: User
                },
            ]
        },
        
    ]
});

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

。