9.动态导航栏怎么做
就是说我们不能把导航栏写死,我们需要后端传给前端Json数据,然后进行一个遍历,最后得到一个动态的导航
类似于这样,在data里面写一个集合,将他们共同的元素拿出来,然后遍历填入对应的位置
<template><el-menuclass="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>