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

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

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

 
    
       menu
          router
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          "leftMenus"/>
       
    
 
 
    
 



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中

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

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

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

　　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
                },
            ]
        },
        
    ]
});