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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

。