9.动态导航栏怎么做

就是说我们不能把导航栏写死,我们需要后端传给前端Json数据,然后进行一个遍历,最后得到一个动态的导航

类似于这样,在data里面写一个集合,将他们共同的元素拿出来,然后遍历填入对应的位置

<template>
    <el-menu
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
    >
        ...
        <el-submenu default-active="Index" :index="menu.name" v-for="menu in menuList">
            <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{menu.title}}</span>
            </template>
            <router-link :to="item.path" v-for="item in menu.children">
                <el-menu-item :index="item.name">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.title}}</span>
                    </template>
                </el-menu-item>
            </router-link>
        </el-submenu>
    </el-menu>
</template>
<script>
    export default {
        name: "SideMenu",
        data() {
            return {
                menuList: [
                    {
                        name: 'SysManga',
                        title: '系统管理',
                        icon: 'el-icon-s-operation',
                        path: '',
                        component: '',
                        children: [
                            {
                                name: 'SysUser',
                                title: '用户管理',
                                icon: 'el-icon-s-custom',
                                path: '/sys/users',
                                children: []
                            }
                        ]
                    },
                    {
                        name: 'SysTools',
                        title: '系统工具',
                        icon: 'el-icon-s-tools',
                        path: '',
                        children: [
                            {
                                name: 'SysDict',
                                title: '数字字典',
                                icon: 'el-icon-s-order',
                                path: '/sys/dicts',
                                children: []
                            },
                        ]
                    }
                ],
            }
        }
    }
</script>